VOLVER
MENÚ

BOTON NEON

Cambiar a color neon cuando se pone el mouse sobre el botón.
Este efecto se logra con la propiedad "box-shadow" agregando varias sombras para que se intensifique su color
EJEMPLO
VER HTML 
             
<div class="neon">
  <h6> Ejemplo </h6>
</div>
VER CSS 
         
          
          
.neon h6:hover{
  background: #41FF09;
  color: white;
  box-shadow: 0 0 5px #41FF09,
              0 0 25px #41FF09,
              0 0 50px #41FF09,
              0 0 200px #41FF09;
  -webkit-box-reflect:below 1px linear-gradient(transition, white)  
}

BOTON CON BORDES
EN MOVIMIENTO

Animación de serpiente en el borde de el boton
Esto se logra con @keyframes
EJEMPLO
VER HTML 

<div class="serpiente">
  <h6>Ejemplo
    <span ></span>
    <span ></span>
    <span ></span>
    <span ></span>
  </h6>
</div>
VER CSS 
         
          
.serpiente-Ejemplo h6:nth-child(1){
  filter: hue-rotate();
}
          
.serpiente-Ejemplo h6 span{
  position: absolute;
  display: block;
}
.serpiente-Ejemplo h6 span :nth-child(1){
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #41FF09;
  animation: animate1 1s linear infinite;
}
@keyframes animate1{
  0%{
    left: -100%;
  }
  50%,100%{
    left: 100%;
  }
}
.serpiente-Ejemplo h6 span:nth-child(2){
  top: -100%;
  right: 0;
  width: 2px;
  height: 100%;
  background-color: #41FF09;
  animation: animate2 1s linear infinite;
  animation-delay: 0.25s;
}
@keyframes animate2{
  0%{
      top: -100%;
  }
  50%,100%{
      top: 100%;
  }
}
.serpiente-Ejemplo h6 span:nth-child(3){
  bottom: 0;
  right: 0;
  width:100%;
  height: 2px;
  background-color: #41FF09;
  animation: animate3 1s linear infinite;
}
@keyframes animate3{
  0%{
    right: -100%;
  }
  50%,100%{
    right: 100%;
  }
}
.serpiente-Ejemplo h6 span:nth-child(4){
  bottom: -100%;
  left: 0;
  width: 2px;
  height: 100%;
  background-color: #41FF09;
  animation: animate4 1s linear infinite;
  animation-delay:0.75s;
}
@keyframes animate4{
  0%{
    bottom: -100%;
  }
  50%,100%{
    bottom: 100%;
  }
}

BOTON 3D

Boton con profunfidad.
Esto se logra con las propiedades de ccs; hover y active
EJEMPLO
VER HTML 
             
<div class="boton">
  <h6>Ejemplo</h6>
</div>
VER CSS 
         
          
.boton h6{
  border-bottom: 5px solid #0045a6;
  border-radius: 12px;
  text-align: center;
  width: 150px;
  height:50px;
  background-color: #28DB18;
  font-family: 'raleway',sans-serif;
  color: var(--azulB);
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  transition: all 0.2s ease 0s;
}
        
.boton h6:hover{
  background: #28DB18;
}
.boton h6:active {
  box-shadow: 2px 2px 2px #777, 0px 0px 35px 0px #28DB18;
  border-bottom:1px solid #0045A6;
  text-shadow:  0px 0px 5px #fff, 0px 0px 5px #fff;
  transform: translateY(4px);
  transition: all 0.1s ease 0s;
  margin: 80px auto 76px auto;
}

BOTON CON RELLENO

al pasar el cursor por el boton se rellena de otro color
EJEMPLO
VER HTML 
             
<div class="icono">
  <h6>Ejemplo
    <span ></span>
    <span ></span>
    <span ></span>
    <span ></span>
  </h6>
</div>
VER CSS 
         
.icono h6 {
  --base: #091D36;
  --text:#28DB18;
  color: white;
  font-size: 16px;
  background-color: ;
  border: 0.3em solid var(--base);
  border-radius: 0.5em;
  width: 12em;
  height: 3em;
  text-transform: uppercase;
  font-weight: bold;
  font-family: sans-serif;
  letter-spacing: 0.1em;
  text-align: center;
  line-height: 3em;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: 0.5s;
  margin: 1em;
}
        
.icono h6 span {
    position: absolute;
    width: 25%;
    height: 100%;
    background-color: var(--text);
    transform: translateY(150%);
    border-radius: 50%;
    left: calc((var(--base) - 1) * 25%);
    transition: 0.5s;
    transition-delay: calc((var(--base) - 1) * 0.1s);
    z-index: -1;
}
.icono h6:hover {
  color: black;
}
.icono h6:hover span {
  transform: translateY(0) scale(2);
}
.icono h6 span:nth-child(1) {
  --base: 1;
}
.icono h6 span:nth-child(2) {
  --base: 2;
}
.icono h6 span:nth-child(3) {
  --base: 3;
}
.icono h6 span:nth-child(4) {
  --base: 4;
}

BOTON ARCOIRIS

Este colorido boton le dara vida a tus paginas web
Este efecto se logra gracias a la propiedad "background-image: linear-gradient"
EJEMPLO
VER HTML 
             
<div class="container text-center">
  <a class= "rainbow rainbow-1">EJEMPLO</a>
</div>
VER CSS 
         
          
      
.rainbow{
	width: 150px;
    height:50px;
    background-color: var(--base);
	font-family: 'raleway',sans-serif;
	text-decoration: none;
    text-transform: uppercase;
	color: #fff;
	cursor: pointer;
	padding: 15px 35px;
}

.rainbow-1:hover{
	background-image: linear-gradient(90deg, #00C0FF 0%, #FFCF00 49%, #FC4F4F 80%, #00C0FF 100%);
	animation:slidebg 5s linear infinite;
} 
@keyframes slidebg {
  to {
	  background-position:20vw;
	}
  }