Botón Animado en CSS3 Puro – No JavaScript –

Para hoy vamos a aprender a crear un sencillo pero profesional botón animado en css3, sin necesidad de utilizar JavaScript.

Botón Animado en CSS3

Existen mutiltud de animaciones que podemos realizar en CSS3 para animar un botón. El botón fantasma, tal y como lo denomina su autor, nos permite crear un efecto al pasar el ratón sobre el botón, cambiando el fondo al color del texto, y el texto al color del fondo. Todo con una bonita y suave animación.

Es bastante sencillo de realizar y únicamente debemos de realizarlo paso a paso hasta llegar al resultado final.

El html

Para comenzar crearmos dos botones bajo la clase bttn y bttn-dark. Éstas clases nos permitirán posteriormente darle estilos a nuestros botones y realizar las animaciones.

<div class="flex">
  <a href="#0" class="bttn">Tu Web Creativa</a>
</div>
<div class="flex dark">
  <a href="#0" class="bttn-dark">tuwebcreativa.com</a>
</div>

El SCSS

Utilizaremos SASS, que para aquellos que lo desconozcan es sencillamente un meta-lenguaje para escribir CSS que se utiliza para describir el estilo de un documento de manera limpia y estructural.

Es importante reseñar que la extensión que deberemos de utilizar será .scss, en vez de, css.

@import 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:700';

$font:'Source Sans Pro', sans-serif;
$primary:#FF0072;
$second:#644cad;
$third:#4426a8;
  
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html, body{
    height:100%;
    width: 100%;
}

body {
  padding:0px;
  margin:0;
  font-family:$font;
  background: #F5F0FF;
  -webkit-font-smoothing: antialiased;
}

.dark {
  background:#24252A;
}

.flex {
  min-height:50vh;
  display:flex;
  align-items:center;
  justify-content:center;
}

a.bttn {
  color:$primary;
  text-decoration:none;
  -webkit-transition:0.3s all ease;
  transition:0.3s ease all;
  &:hover {
    color:#FFF;
  }
  &:focus {
    color:#FFF;
  }
}

a.bttn-dark {
  color:$second;
  text-decoration:none;
  -webkit-transition:0.3s all ease;
  transition:0.3s ease all;
  &:hover {
    color:#FFF;
  }
  &:focus {
    color:#FFF;
  }
}


.bttn {
  font-size:18px;
  letter-spacing:2px;
  text-transform:uppercase;
  display:inline-block;
  text-align:center;
  width:270px;
  font-weight:bold;
  padding:14px 0px;
  border:3px solid $primary;
  border-radius:2px;
  position:relative;
  box-shadow: 0 2px 10px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.1);
  &:before {
    -webkit-transition:0.5s all ease;
    transition:0.5s all ease;
    position:absolute;
    top:0;
    left:50%;
    right:50%;
    bottom:0;
    opacity:0;
    content:'';
    background-color:$primary;
    z-index:-2;
  }
  &:hover {
    &:before {
      -webkit-transition:0.5s all ease;
      transition:0.5s all ease;
      left:0;
      right:0;
      opacity:1;
    }
  }
  &:focus {
    &:before {
      transition:0.5s all ease;
      left:0;
      right:0;
      opacity:1;
    }
  }
}

.bttn-dark {
  font-size:18px;
  letter-spacing:2px;
  text-transform:uppercase;
  display:inline-block;
  text-align:center;
  width:270px;
  font-weight:bold;
  padding:14px 0px;
  border:3px solid $second;
  border-radius:2px;
  position:relative;
  box-shadow: 0 2px 10px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.1);
  z-index:2;
  &:before {
    -webkit-transition:0.5s all ease;
    transition:0.5s all ease;
    position:absolute;
    top:0;
    left:50%;
    right:50%;
    bottom:0;
    opacity:0;
    content:'';
    background-color:$second;
    z-index:-1;
  }
  &:hover {
    &:before {
      -webkit-transition:0.5s all ease;
      transition:0.5s all ease;
      left:0;
      right:0;
      opacity:1;
    }
  }
  &:focus {
    &:before {
      -webkit-transition:0.5s all ease;
      transition:0.5s all ease;
      left:0;
      right:0;
      opacity:1;
    }
  }
}

Resultado Final

Así es como quedaría nuestro bóton animado en css3.

See the Pen Botones Animados en CSS sin JavaScript by Antonio José (@ajmorales73) on CodePen.

Si te gustó déjame tu like, comparte con tus amigos en las redes sociales, y si tienes cualquier duda, o sugerencia me la dejes en los comentarios. ¡Gracias!