Efectos de Activación para Enlaces CSS3

Una de las partes esenciales de una página web son los enlaces. Haciendo clic en estos, puedes ir a cualquier lugar desde la web ya que te envía a una página específica que quieres visitar.

Los enlaces típicos contienen efectos de activación sencillos que utilizan un simple cambio de color cuando el ratón apunta o hace clic en ellos. Sin embargo, ¿has pensado alguna vez que se podría hacer mejor?

Si alguna vez lo has pensado, ¡estás en la página correcta! Hoy, voy a darte un tutorial de cómo crear increíbles enlaces CSS3 utilizando las nuevas funciones de CSS3: transición y transformación. Al final de este tutorial tendrás efectos de activación para enlaces que revolucionarán seguramente tu menú.

Recursos necesarios para completar este tutorial:

  • Font-Awesome
  • Conocimiento de transiciones y transformaciones CSS3
  • Tiempo y paciencia

Demo 1

La primera demo contiene un efecto sencillo en el cual, cuando diriges tu ratón a él, un borde de 3px aparecerá desde atrás del recuadro que contiene el texto de enlace.

HTML

Nuestro código simplemente contiene una etiqueta de navegación (<nav>) HTML5 que contiene todos los enlaces de nuestra demo. Cada enlace lleva las clases box y demo-1. También colocaremos iconos de Font Awesome antes del enlace para conseguir un diseño chulo.

<nav>
      <a href="demo1.html" class="box demo-1"> <i class="fa fa-hand-o-right"></i> <span>Demo 1</span> </a>
      <a href="demo2.html" class="box demo-1"> <i class="fa fa-hand-o-up"></i> <span>Demo 2</span></a>
      <a href="demo3.html" class="box demo-1"> <i class="fa fa-hand-o-left"></i>  </i> <span>Demo 3</span></a>
      <a href="demo4.html" class="box demo-1">  <i class="fa fa-thumbs-o-up"></i> <span>Demo 4</span></a>
</nav>

CSS

Para nuestro CSS, utilizaremos el selector ::before y ::after para insertar un borde de 3 píxels cuando el ratón se dirija a los enlaces. Para conseguir un efecto suave, utilizaremos una transición CSS3.

.box{
  color: #fff;
  padding: 10px;
}

.box:hover{
  background: #fff;
  color: #26425E;
}

.demo-1 {
  position: relative;
}

.demo-1:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;

  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.2s;

  -webkit-transition-property: top, left, right, bottom;
  -moz-transition-property: top, left, right, bottom;
  -ms-transition-property: top, left, right, bottom;
  -o-transition-property: top, left, right, bottom;
  transition-property: top, left, right, bottom;
}

.demo-1:hover:before, .demo-1:focus:before{
  -webkit-transition-delay: .1s;
  -moz-transition-delay: .1s;
  -ms-transition-delay: .1s;
  -o-transition-delay: .1s;
  transition-delay: .1s; 

  border: #fff solid 3px;
  bottom: -7px;
  left: -7px;
  top: -7px;
  right: -7px;
}

Demo 2

La segunda demo tendrá un destacado efecto suave en el que, cuando te aproximas con el ratón, resaltará el texto y añadirá unas líneas encima y debajo del texto.

HTML

Nuestro código es más o menos lo mismo que en la primera demo, sin embargo esta vez utilizaremos demo-2 como clase en cada enlace. Utilizaré el atributo de datos HTML5 para manipular los efectos de activación vía CSS, más adelante. Importante, he añadido &nbps; en el atributo de texto de datos. Puesto que el los atributos de datos no admiten espacios, necesito usar una línea de escape para dejar un espacio entre la palabra Demo y el número de la demo. Aparte de esta línea de escape, también puedes utilizar el código &#160 para crear salidas similares.

<nav>
    <a href="demo1.html" class="demo-2" data-text="Demo&nbsp;1">Demo 1</a>
    <a href="demo2.html" class="demo-2" data-text="Demo&nbsp;2">Demo 2</a>
    <a href="demo3.html" class="demo-2" data-text="Demo&nbsp;3">Demo 3</a>
    <a href="demo4.html" class="demo-2" data-text="Demo&nbsp;4">Demo 4</a>
</nav>

CSS

Ahora para nuestro CSS configuraremos unas líneas encima y debajo y estableceremos la anchura del atributo data-text en cero. Utilizando el selector :hover y :focus haremos la transición de la anchura del atributo de datos así como de las dos líneas de borde al 100% para crear un efecto de resalte suave.

.demo-2{
  color: #314559;
  padding: 10px 0;
}

.demo-2::before {
  color: #fff;
  max-width: 0;
  padding: 10px 0;
  border-top: 1px dashed #fff;
  border-bottom: 1px dashed #fff;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  content: attr(data-text);
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.demo-2:hover::before,
.demo-2:focus::before {
  max-width: 100%;
  outline: none;
  text-shadow: none;
}

Demo 3

Nuestra tercera demo está inspirada en el efecto de activación de enlace 3D de Sebastian Ekström 3D link hover effect. Ésta tendrá una caja 3D de fondo que da la vuelta cuando el ratón pase por encima.

HTML

Nuestro código es casi idéntico a las dos primeras demos, solo que para crear algunos efectos diferentes necesitamos utilizar un atributo de datos para repetir el texto del enlace en el pseudo-elemento.

<nav>
      <a href="demo1.html" class="demo-3"> <span data-text="Demo 1">Demo 1</span></a>
      <a href="demo2.html" class="demo-3"><span data-text="Demo 2">Demo 2</span></a>
      <a href="demo3.html" class="demo-3"><span data-text="Demo 3">Demo 3</span></a>
      <a href="demo4.html" class="demo-3"><span data-text="Demo 4">Demo 4</span></a>
</nav>

CSS

Ahora añadamos algo de magia a nuestro código. La idea básicamente para este efecto es utilizar translate3dperspective para crear la ilusión de que la caja gira arriba y abajo. Usaremos overflow: hidden para enmascarar la caja, y que el resto del contenido sea invisible.

 .demo-3 {
  color: #fff;
  display: inline-block;
  text-decoration: none;
  overflow: hidden;
  vertical-align: top;
   background: #1C3044;
  -webkit-perspective: 600px;
  -moz-perspective: 600px;
  -ms-perspective: 600px;
  perspective: 600px;
  -webkit-perspective-origin: 50% 50%;
  -moz-perspective-origin: 50% 50%;
  -ms-perspective-origin: 50% 50%;
  perspective-origin: 50% 50%;
}
 .demo-3:hover span {
  background: #314559;
  -webkit-transform: translate3d(0px, 0px, -30px) rotateX(90deg);
  -moz-transform: translate3d(0px, 0px, -30px) rotateX(90deg);
  -ms-transform: translate3d(0px, 0px, -30px) rotateX(90deg);
  transform: translate3d(0px, 0px, -30px) rotateX(90deg);
}
  .demo-3 span {
  display: block;
  position: relative;
  padding: 10px 20px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease;
  -webkit-transform-origin: 50% 0%;
  -moz-transform-origin: 50% 0%;
  -ms-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

 .demo-3 span:after {
  content: attr(data-text);
  -webkit-font-smoothing: antialiased;
  padding: 10px 20px;
  color: #fff;
  background: #0e6957;
  display: block;
  position: absolute;

  left: 0;
  top: 0;
  -webkit-transform-origin: 50% 0%;
  -moz-transform-origin: 50% 0%;
  -ms-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  -webkit-transform: translate3d(0px, 105%, 0px) rotateX(-90deg);
  -moz-transform: translate3d(0px, 105%, 0px) rotateX(-90deg);
  -ms-transform: translate3d(0px, 105%, 0px) rotateX(-90deg);
  transform: translate3d(0px, 105%, 0px) rotateX(-90deg);
}

Importante: también usaremos la propiedad rotateX con translate3d. Esto creará un efecto de transformación y rotación del recuadro cuando el texto esté oculto.

Demo 4

La cuarta demo será diferente. En esta ocasión crearemos una animación de borde intermitente utilizando la propiedad @keyframes de CSS3.

HTML

Nuestro códogp para esta demo será diferente. Dentro de nuestra etiqueta nav, añadiremos 4 enlaces y colocaremos 2 etiquetas span dentro de cada enlace. El primer span contendrá nuestro texto de un modo normal y la segunda de modo oculto. También añadiremos la clase demo-4 en cada enlace.

<nav>
    <a href="demo1.html" class="demo-4">
      <span>
        <span>Demo 1</span>
        <span>Hover</span>
        <span></span>
      </span>
    </a>

    <a href="demo2.html" class="demo-4">
      <span>
        <span>Demo 2</span>
        <span>Hover</span>
        <span></span>
      </span>
    </a>

    <a href="demo3.html" class="demo-4">
      <span>
        <span>Demo 3</span>
        <span>Hover</span>
        <span></span>
      </span>
    </a>

    <a href="demo4.html" class="demo-4">
      <span>
        <span>Demo 4</span>
        <span>Hover</span>
        <span></span>
      </span>
    </a>

  </nav>

CSS

Es el momento de darle algo de vida a nuestros enlaces. Para crear un efecto de borde intermitente, aprovecharemos una nueva función CSS3, la propiedad @keyframes, para crear la animación. Primero, necesitamos especificar la anchura de las etiquetas de anclaje, así como de los bordes del span.

.demo-4 {
  width: 210px;
  background-color: transparent;
  cursor: pointer;
  border-color: #bdc3c7;
}

.demo-4:hover {
  border-color: #C672E9;
}

.demo-4 span:nth-child(1) {
  color: #FCFCFC;
}

.demo-4 span:nth-child(2) {
  color: #C672E9;
}

.demo-4 span {
  font-family: 'Lato', sans-serif;
  font-size: 28px;
  letter-spacing: 3px;
}

.demo-4 {
  position: relative;
  box-sizing: border-box;
  padding: 0;
  border-style: none;
  height: 65px;
  display: inline-block;
}

.demo-4 span {
  position: absolute;
  box-sizing: border-box;
  display: block;
}

Después, necesitamos especificar la posición y las propiedades de los contenidos utilizando los selectores :before y :after. Incluirá también la posición de los bordes y el texto en modo oculto.

.demo-4>span>span:nth-child(3), .demo-4:before, .demo-4:after, .demo-4>:first-child, .demo-4>:first-child:before, .demo-4>:first-child:after {
  border-color: inherit;
  display: block;
  -moz-transition: border-color 0.3s ease;
  -webkit-transition: border-color 0.3s ease;
  transition: border-color 0.3s ease;
}

.demo-4:before, .demo-4:after, .demo-4>:first-child:before, .demo-4>:first-child:after {
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  position: absolute;
  box-sizing: border-box;
  content: ' ';
}

.demo-4>span>span:nth-child(3), .demo-4:before, .demo-4:after, .demo-4>:first-child:before, .demo-4>:first-child:after {
  border-width: 3px;
}
.demo-4>span>span:nth-child(3) {
  border-radius: 3px;
}
.demo-4:before {
  border-radius: 3px 0 0 3px;
}
.demo-4:after {
  border-radius: 0 3px 3px 0;
}
.demo-4>:first-child:before {
  border-radius: 3px 3px 0 0;
}
.demo-4>:first-child:after {
  border-radius: 0 0 3px 3px;
}

.demo-4>:first-child {
  top: 0;
  left: 0;
  width: inherit;
  height: inherit;
}
.demo-4>span span {
  width: inherit;
  text-align: center;
  -moz-transition: opacity 0.6s ease, top 0.5s ease;
  -webkit-transition: opacity 0.6s ease, top 0.5s ease;
  transition: opacity 0.6s ease, top 0.5s ease;
}
.demo-4>span>span:nth-child(1) {
  opacity: 1;
  top: 18px;
}
.demo-4>span>span:nth-child(2) {
  top: 37px;
  opacity: 0;
}
.demo-4:hover>span>span:nth-child(1) {
  opacity: 0;
  top: 2px;
}
.demo-4:hover>span>span:nth-child(2){
  opacity: 1;
  top: 18px;
}

.demo-4>span>span:nth-child(3) {
  top: 28%;
  height: 44%;
  width: inherit;
  border-style: none solid none solid;
}

.demo-4:before, .demo-4:after {
  top: 0;
  width: 0;
  height: inherit;
  border-style: solid none solid none;
}

.demo-4>:first-child:before, .demo-4>:first-child:after {
  left: 0;
  height: 0;
  width: inherit;
  border-style: none solid none solid;
}

.demo-4:before {
  -webkit-animation-name: left-center;
  animation-name: left-center;
}

.demo-4:after {
  -webkit-animation-name: right-center;
  animation-name: right-center;
}

.demo-4>:first-child:before {
  -webkit-animation-name: center-top;
  animation-name: center-top;
}

.demo-4>:first-child:after {
  -webkit-animation-name: center-bottom;
  animation-name: center-bottom;
}

.demo-4:hover:before {
  -webkit-animation-name: center-left;
  animation-name: center-left;
}

.demo-4:hover:after {
  -webkit-animation-name: center-right;
  animation-name: center-right;
}

.demo-4:hover>:first-child:before {
  -webkit-animation-name: top-center;
  animation-name: top-center;
}

.demo-4:hover>:first-child:after {
  -webkit-animation-name: bottom-center;
  animation-name: bottom-center;
}

Importante: He colocado también el nombre de la animación en cada selector oculto. Esta vez necesitamos trabajar en la animación. Abajo está la configuración de la animación @keyframes para Chrome, Safari, IE y Firefox.

@-webkit-keyframes center-left {
    0%   {left: 40%; width: 8%; opacity: 0.2;}
    25%  {left: 25%; width: 15%;}
    50%  {left: 0%; width: 30%;}
    80%  {left: 0%; width: 0%;}
    100% {left: 0%; width: 0%; opacity: 1;}
}

@-webkit-keyframes left-center {
    0%   {left: 0%; width: 0%; opacity: 1;}
    20%  {left: 0%; width: 0%;}
    50%  {left: 0%; width: 30%;}
    55%  {left: 40%; width: 11%;}
    100% {left: 43%; width: 8%; opacity: 0.2;}
}

@-webkit-keyframes center-right {
    0%   {left: 52%; width: 8%; opacity: 0.2;}
    25%  {left: 60%; width: 15%;}
    50%  {left: 70%; width: 30%;}
    80%  {left: 100%; width: 0%;}
    100% {left: 100%; width: 0%; opacity: 1;}
}

@-webkit-keyframes right-center {
    0%   {left: 100%; width: 0%; opacity: 1;}
    20%  {left: 100%; width: 0%;}
    50%  {left: 70%; width: 30%;}
    55%  {left: 49%; width: 11%;}
    100% {left: 49%; width: 8%; opacity: 0.2;}
}

@-webkit-keyframes top-center {
    0%   {top: 0%; height: 0%; opacity: 0.2;}
    50%  {top: 0%; height: 0%;}
    60%  {top: 0%; height: 20%;}
    80%  {top: 0%; height: 50%;}
    90%  {top: 25%; height: 25%;}
    100% {top: 50%; height: 0%; opacity: 1;}
}

@-webkit-keyframes center-top {
    0%   {top: 50%; height: 0%; opacity: 1;}
    10%  {top: 25%; height: 25%;}
    20%  {top: 0%; height: 50%;}
    40%  {top: 0%; height: 20%;}
    50%  {top: 0%; height: 0%;}
    100% {top: 0%; height: 0%; opacity: 0.2;}
}

@-webkit-keyframes bottom-center {
    0%   {top: 100%; height: 0%; opacity: 0.2;}
    50%  {top: 100%; height: 0%;}
    60%  {top: 80%; height: 20%;}
    80%  {top: 50%; height: 50%;}
    90%  {top: 50%; height: 25%;}
    100% {top: 50%; height: 0%; opacity: 1;}
}

@-webkit-keyframes center-bottom {
    0%   {top: 50%; height: 0%; opacity: 1;}
    10%  {top: 50%; height: 25%;}
    20%  {top: 50%; height: 50%;}
    40%  {top: 80%; height: 20%;}
    50%  {top: 100%; height: 0%;}
    100% {top: 100%; height: 0%; opacity: 0.2;}
}

@keyframes center-left {
    0%   {left: 40%; width: 8%; opacity: 0.2;}
    25%  {left: 25%; width: 15%;}
    50%  {left: 0%; width: 30%;}
    80%  {left: 0%; width: 0%;}
    100% {left: 0%; width: 0%; opacity: 1;}
}

@keyframes left-center {
    0%   {left: 0%; width: 0%; opacity: 1;}
    20%  {left: 0%; width: 0%;}
    50%  {left: 0%; width: 30%;}
    55%  {left: 40%; width: 11%;}
    100% {left: 43%; width: 8%; opacity: 0.2;}
}

@keyframes center-right {
    0%   {left: 52%; width: 8%; opacity: 0.2;}
    25%  {left: 60%; width: 15%;}
    50%  {left: 70%; width: 30%;}
    80%  {left: 100%; width: 0%;}
    100% {left: 100%; width: 0%; opacity: 1;}
}

@keyframes right-center {
    0%   {left: 100%; width: 0%; opacity: 1;}
    20%  {left: 100%; width: 0%;}
    50%  {left: 70%; width: 30%;}
    55%  {left: 49%; width: 11%;}
    100% {left: 49%; width: 8%; opacity: 0.2;}
}

@keyframes top-center {
    0%   {top: 0%; height: 0%; opacity: 0.2;}
    50%  {top: 0%; height: 0%;}
    60%  {top: 0%; height: 20%;}
    80%  {top: 0%; height: 50%;}
    90%  {top: 25%; height: 25%;}
    100% {top: 50%; height: 0%; opacity: 1;}
}

@keyframes center-top {
    0%   {top: 50%; height: 0%; opacity: 1;}
    10%  {top: 25%; height: 25%;}
    20%  {top: 0%; height: 50%;}
    40%  {top: 0%; height: 20%;}
    50%  {top: 0%; height: 0%;}
    100% {top: 0%; height: 0%; opacity: 0.2;}
}

@keyframes bottom-center {
    0%   {top: 100%; height: 0%; opacity: 0.2;}
    50%  {top: 100%; height: 0%;}
    60%  {top: 80%; height: 20%;}
    80%  {top: 50%; height: 50%;}
    90%  {top: 50%; height: 25%;}
    100% {top: 50%; height: 0%; opacity: 1;}
}

@keyframes center-bottom {
    0%   {top: 50%; height: 0%; opacity: 1;}
    10%  {top: 50%; height: 25%;}
    20%  {top: 50%; height: 50%;}
    40%  {top: 80%; height: 20%;}
    50%  {top: 100%; height: 0%;}
    100% {top: 100%; height: 0%; opacity: 0.2;}
}

Conclusión

¡Ya lo tienes! ¡Acabas de crear un efecto hover increíble!

Atrévete a experimentar con los efectos. Hay infinitas posibilidades y creo que puedes mejorarlas tú mismo.
Espero que hayas aprendido algo de este tutorial y, por favor, deja algunas líneas en la sección de comentarios si has creado algunos nuevos efectos a partir de estas demos.

Sólo un recordatorio: Aunque CSS3 ha avanzado mucho algunas características nuevas como transform-style no funcionan en IE10 pero siempre puedes suplirlo utilizando JavaScript.

Si quieres mantenerte al día con nuestros artículos, puedes seguirnos en Twitter, Facebook, Google+, o incluso suscribiéndote a nuestro hilo RSS.

Boletín de noticias

0 Comentarios

No hay comentarios aún

Deja tu respuesta

*
* Longitud mínima: 20 caracteres