.btn {
  width: 140px;
  height: 50px;
  background: linear-gradient(to top, #223645, #223645, #1d4075);
  color: #fff;
  border-radius: 50px;
  border: none;
  outline: none;
  cursor: pointer;
  position: relative;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  margin-top: -28px;	
}

.btn span {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: top 0.5s;
  color: white;
}

.btn-text-one {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.btn-text-two {
  position: absolute;
  width: 100%;
  top: 150%;
  left: 0;
  transform: translateY(-50%);
}

.btn:hover .btn-text-one {
  top: -100%;
}

.btn:hover .btn-text-two {
  top: 50%;
}

/*---==========================================-----
-----==================boton_neon ===============-----
-----=========================================-----*/

button2 {
 --glow-color: transparent;
 --enhanced-glow-color: rgb(231, 206, 255);
 --btn-color: #0B1D31;
 border: .25em solid var(--glow-color);
 color: var(--glow-color);
 background-color: var(--btn-color);
 border-radius: 3em;
 outline: none;
 box-shadow: 0 0 1em .25em var(--glow-color),
        0 0 4em 1em var(--glow-spread-color),
        inset 0 0 .75em .25em var(--glow-color);
 text-shadow: 0 0 .5em var(--glow-color);
 position: relative;
 transition: all 0.3s;
 margin-top: 11px;
 display: inline-block; 
 font-size: 17px; 
 font-weight: 500; 
 line-height: 1.375; 
 min-width: 200px;
 padding: 18px 37px;	
	  
}

button2::after {
 pointer-events: none;
 content: "";
 position: absolute;
 top: 120%;
 left: 0;
 height: 100%;
 width: 100%;
 background-color: var(--glow-spread-color);
 filter: blur(2em);
 opacity: .7;
 transform: perspective(1.5em) rotateX(35deg) scale(1, .6);
}

button2:hover {
 color: var(--btn-color);
 background-color: var(--glow-color);
 box-shadow: 0 0 1em .25em var(--glow-color),
        0 0 4em 2em var(--glow-spread-color),
        inset 0 0 .75em .25em var(--glow-color);
        border: 1px solid white;
}

button2:active {
 box-shadow: 0 0 0.6em .25em var(--glow-color),
        0 0 2.5em 2em var(--glow-spread-color),
        inset 0 0 .5em .25em var(--glow-color);
}

/*---==========================================-----
-----==================boton_formulario ===============-----
-----=========================================-----*/
button {
  font-family: monospace;
  background-color: #860832;
  color: #fff;
  border: none;
  border-radius: 8px;
  width: 243px;
  height: 45px;
  transition: .3s;
}

button:hover {
  background-color: #223645;
  box-shadow: 0 0 0 5px #3b83f65f;
  color: #ffffff;
}

/*---==========================================-----
-----==================boton_modal ===============-----
-----=========================================-----*/

.buttonmodal {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 10px;
  border: none;
  background-color: red;
  position: relative;
}

.buttonmodal::after {
  content: 'like';
  width: fit-content;
  height: fit-content;
  position: absolute;
  font-size: 15px;
  color: white;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  opacity: 0;
  visibility: hidden;
  transition: .2s linear;
  top: 115%;
}

.icon {
  width: 30px;
  height: 30px;
  transition: .2s linear;
}

.icon path {
  fill: white;
  transition: .2s linear;
}

.buttonmodal:hover > .icon {
  transform: scale(1.2);
}

.buttonmodal:hover > .icon path {
  fill: rgb(177, 139, 189);
}

.buttonmodal:hover::after {
  visibility: visible;
  opacity: 1;
  top: 105%;
}