Bordes Animados En Botones

Una nueva sección de botones animados, aunque acá sólo vamos a animar el borde.
Sin más acá te mostraré cuatro formas de animar el borde de cada botón, recuerda escoger el que te guste, copia y pega en tu blogger.

Este es el código HTML que vamos a necesitar; lo que está en rojo es el mensaje que llevará el botón que vanos a animar.
Las letras de color naranja es la clase para hacer las animaciones si cambias esta palabra debes cambiar todas las que están del mismo color naranja.


<div class="bordeb">
  <a href="#">UN POCO PARA TU WEB !!!</a>
</div>


PRIMERA Animación, comenzaremos animando el botón, haciendo que la barra animada, comience por la izquierda y sal por la derecha; como se ve en el siguiente botón:



Este es el código CSS, y aquí te muestro lo que puedes cambiar como, color y tamaño de las letras, color de fondo del botón, color de la barra que recorre el botón, etc.
La palabra que está en color naranja en la clase si cambias una debes cambiarlas todas

/*Lo que esta entre el / y  / se puede borrar*/
.bordeb a{
    color: white; /*Color de la letra*/
    padding: 10px 15px;/ *Ancho del botón*/
    font-size: 20px; /*Tamaño de la letra*/
    background: green; /*Color de fondo*/
    text-decoration: none; /*Quita decoración de las letras*/
    position: relative; /*No tocar (al quitar la animación falla)*/
}
.bordeb a:before {
    content: '';/ *No tocar (al quitar la animación falla)*/
    display: block;/ *Muestra la #barra que recorre el botón*/
    width: 0px ;/*Ancho de la #barra antes del poner el mouse*/
    height: 3px; /*Alto de la #barra*/
    background: black; /*Color de la #barra*/
    position: absolute; /*No tocar (al quitar la animación falla)*/
    right: 0px; /*De donde comienza la animación*/
    bottom: 0px; /*Ubicacion de la #barra*/
    transition: all 0.3s ease-in-out; /*Tiempo que dura la barra en recorrer el botón*/
}
.bordeb a:hover:before{
    width: 100%;/*Ancho que tendrá la #barra al poner el mouse*/
    left: 0;/*Hacia donde sale la animación*/
}
.bordeb a:hover{
    color: black;/*Cambia el color de las letras mientras pasas el mouse*/
}

=========================================

SEGUNDA Animación, en la siguiente animación sólo vamos a quitarle, la forma de como termina la animación ya no saldrá por la derecha, sino, que la barra que anima el botón se devolverá nuevamente a la izquierda.

Como se ve en el siguiente ejemplo:



/*Lo que esta entre el / y  / se puede borrar*/
.bordeb a{
    color: white; /*Color de la letra*/
    padding: 10px 15px;/ *Ancho del botón*/
    font-size: 20px; /*Tamaño de la letra*/
    background: red; /*Color de fondo*/
    text-decoration: none; /*Quita decoración de las letras*/
    position: relative; /*No tocar (al quitar la animación falla)*/
}
.bordeb a:before {
    content: '';/ *No tocar (al quitar la animación falla)*/
    display: block;/ *Muestra la #barra que recorre el botón*/
    width: 0px ;/*Ancho de la #barra antes del poner el mouse*/
    height: 3px; /*Alto de la #barra*/
    background: orange; /*Color de la #barra*/
    position: absolute; /*No tocar (al quitar la animación falla)*/
    left: 0px; /*De donde comienza la animación == aqui se cambia el "right" por "left"*/
    bottom: 0px; /*Ubicacion de la #barra*/
    transition: all 0.3s ease-in-out; /*Tiempo que dura la barra en recorrer el botón*/
}
.bordeb a:hover:before{
    width: 100% ;/*Ancho que tendrá la #barra al poner el mouse*/
    left: 0;/*Hacia donde sale la animación*/
}
.bordeb a:hover{
    color: orange; /*Cambia el color de las letras mientras pasas el mouse*/
}

El código HTML, sigue siendo el mismo, para que esta animación se ejecute debes cambiar right por left, como se ven donde están las letras rojas.

=========================================

TERCERA Animación, esta animación es parecida a la segunda, solo que, en esta la barra comenzará desde la derecha y se devolverá a la misma.

Mira el siguiente botón, ya sabes los colores dependen de tus gustos y tu web para que concuerden con la misma.


/*Lo que esta entre el / y  / se puede borrar*/
.bordeb a{
    color: white;/*Color de la letra*/
    padding: 10px 15px;/*Ancho del boton*/
    font-size: 20px;/*Tamaño de la letra*/
    background: #1464cb;/*Color de fondo*/
    text-decoration: none;/*Quita decoracion de las letras*/
    position: relative;/*No tocar (al quitar la animacion falla)*/
}
.bordeb a:before {
    content: '';/*No tocar (al quitar la animacion falla)*/
    display: block;/*Muestra la #barra que recorre el boton*/
    width: 0px;/*Ancho de la #barra antes del poner el mouse*/
    height: 3px;/*Alto de la #barra*/
    background: greenyellow;/*Color de la #barra*/
    position: absolute;/*No tocar (al quitar la animacion falla)*/
    right: 0px;/*De donde comienza la animacion =aqui se cambia el "left" por "right" */
    bottom: 0px;/*Ubicacion de la #barra*/
    transition: all 0.3s ease-in-out; /*Tiempo que dura la barra en recorrer el botón*/
}
.bordeb a:hover:before{
    width: 100%;/*Ancho que tendra la #barra al poner el mouse*/
    right: 0;/*Hacia donde sale la animacion == aqui se cambia el "left" por "right" */
}
.bordeb a:hover{
    color: greenyellow;/*Cambia el color de las letras mientras pasas el mouse*/
}

-El código HTML, sigue siendo el mismo-

Como se puede notar aquí solo cambie la palabra left por right en dos lados como muestran las letras rojas.

=========================================

LA CUARTA Animación, es bastante genial, para mí, esta es mi favorita me encanta como llena todo el botón desde el centro, creando una animación muy excelente.
Sino, mira el siguiente ejemplo.


Recuerda que el código HTML, ha sido el mismo para todos los botones, lo único que ha cambiado es el estilo, los códigos CSS, que son con lo que le damos las animaciones que deseamos.

Aquí el código CSS, para la cuarta animación, solo hay que cambiar un par de cosas.

/*Lo que esta entre el / y  / se puede borrar*/
.bordeb a{
    color: gray; /*Color de la letra*/
    padding: 10px 15px; /*Ancho del boton*/
    font-size: 20px; /*Tamaño de la letra*/
    background: blue; /*Color de fondo*/
    text-decoration: none; /*Quita decoracion de las letras*/
    position: relative; /*No tocar (al quitar la animacion falla)*/
}
.bordeb a:before {
    content: ''; /*No tocar (al quitar la animacion falla)*/
    display: block; /*Muestra la #barra que recorre el boton*/
    width: 0px; /*Ancho de la #barra antes del poner el mouse*/
    height: 3px; /*Alto de la #barra*/
    background: red; /*Color de la #barra*/
    position: absolute; /*No tocar (al quitar la animacion falla)*/
    right: 50%; /*De donde comienza la animacion == modificar este valor en % */
    bottom: 0px ;/*Ubicacion de la #barra*/
    transition: all 0.3s ease-in-out;  /*Tiempo que dura la barra en recorrer el botón*/
}
.bordeb a:hover:before{
    width: 100%; /*Ancho que tendrá la #barra al poner el mouse*/
    right: 0; /*Hacia donde sale la animacion*/
}
.bordeb a:hover{
    color: white; /*Cambia el color de las letras mientras pasas el mouse*/
}

Como se ha notado he cambia el valor del primer right a 50%, esto fuerza a que la barra empiece desde la mitad del botón, pero mas adelante le digo que solo llegue hasta la derecha y que tenga 0px en la misma y así se crea el efecto que parece que va desde el centro.

Y eso a sido todo.

Si deseas usar todas las animaciones en un mismo blog, debes cambiar el nombre de la clase (class="bordeb"), recuerda lo que esta en color naranja, para que te funcionen.

Entradas populares