.cm-btn-wrapper {
  text-align: center;
}

.cm-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  overflow: hidden;
}

.cm-btn-style::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: var(--cm-btn-bg, linear-gradient(0deg, rgba(50, 36, 74, 1) 0%, rgba(79, 68, 99, 1) 100%));
  border-radius: var(--cm-btn-radius, 0.5em);
  transition: height 0.3s ease-out;
  z-index: 0;
}

.cm-btn-style:hover::before {
  height: 0%;
}

.cm-btn-style span {
  position: relative;
  display: inline-block;
  font-size: var(--cm-btn-font-size, 1.3em);
  padding: 15px 20px;
  color: var(--cm-btn-text-color, #fff);
  text-transform: uppercase;
  border: var(--cm-btn-border-width, 1px) var(--cm-btn-border-style, solid) var(--cm-btn-border-color, rgb(79, 68, 99));
  border-radius: var(--cm-btn-radius, 0.5em);
  width: var(--cm-btn-width, auto);
  transition: color 0.2s 0.1s;
  z-index: 1;
}

.cm-btn-style:hover span {
  color: rgb(28, 31, 30);
}