Botón Animado solo con CSS y HTML



El botón que te enseñare esta vez es el que está arriba, el que dice "HOLA MUNDO 1 !!!".

Es bastante fácil de hacer y con pocos códigos de CSS y de HTML, son algunas lineas para que tengas este botón y le des mas vida a tu blog de blogger, recuerda que todo lo que publicamos acá ya a sido probado y adaptado a blogger, Tú solo debes darles los colores y las formas que mas te gusten y se adapten a tu blog.

Buenos sin nada mas que decir aquí te dejo los códigos y te enseñare como ubicarlos y darles varias formas de animación, así que Tú escoges la animación que más te agrade.

El código HTML es solo uno el CSS cambia negus la animación que desees:

<div class="unode"><a href="#">HOLA MUNDO !!!</a>
</div>
"Este es el código HTML, bastante sencillo."

Lo que está en rojo, es el nombre de la clase que nos ayudará a darles los estilos y por ende las animaciones. Y lo que está en blanco es el mensaje que desees tener en el botón animado.

Las animaciones que les puede dar son muchas aunque aquí solo te enseñaré cuatro, pero prometo que una de ellas te gustará.


Comenzamos con la primera que es cubrir el botón de izquierda a derecha: como se muestra en el siguiente botón:


Estos son los estilos CSS, bastante cortos !!!
/* */ => esto sirve para hacer comentarios sin dañar el código CSS
.unode a{
    background: white;  /* Color de fondo*/
    font-size: 25px;  /* Tamaño de las letras del botón*/
    padding: 10px 25px;  /* Espacio dentro del botón, al lado de las letras*/
    border: solid 1px black;  /*Opcional. Si lo quitas borras los bordes del botón*/
    color: black;   /* Color de las letras*/
    text-decoration: none;  /* Quita el subrayado de las letras*/
    transition: all 0.5s ease;  /* Para que la animacion sea suave y no tosca*/
}
.unode a:hover{
    color: white; /* Color que tomará las letras al pasar el mouse*/
}
.unode a{
    box-shadow: 0px 0px black inset; /*2*/
}
.unode a:hover{
    box-shadow: 250px 0px black inset; /* Tamaño que cubrirá la animación*/
}

- Recuerda lo que esta en rojo es el nombre de la clase de los estilos CSS, si cambias uno debes cambiarlos todos...
- Lo que esta en color naranja solo es información se puede borrar si desea. Donde esta el /*2*/, si se aumenta uno de los dos valores se verá un borde. Más adelante les mostraré.



Vamos con la segunda animación, que es cubrir el botón de derecha a izquierda: como se muestra en el siguiente botón:


.unode a{
    background:  red;  /* Color de fondo*/
    font-size: 25px;  /* Tamaño de las letras del botón*/
    padding: 10px 25px;  /* Espacio dentro del botón, al lado de las letras*/
    color: green;   /* Color de las letras*/
    text-decoration: none;  /* Quita el subrayado de las letras*/
    transition: all 0.5s ease;  /* Para que la animacion sea suave y no tosca*/
}
.unode a:hover{
    color: red; /* Color que tomará las letras al pasar el mouse*/
}
.unode a{
    box-shadow: 0px 0px gree inset; /*2*/
}
.unode a:hover{
    box-shadow: -250px 0px green inset; /* Tamaño que cubrirá la animación*/
}

Como pueden ver el código es el mismo, solo hay dos pequeños cambios, aparte de los colores, no están los bordes negros y el sombreado de color verde ahora es negativo, así le damos la animación de derecha a izquierda.



Sigamos con la tercera animación. El código acá cambia un poco, y el botón que vamos a animar es el que esta en la parte superior que dice  "HOLA MUNDO 1 !!!" 

.unode a{
    background: white;  /* Color de fondo*/
    font-size: 25px;  /* Tamaño de las letras del botón*/
    padding: 10px 25px;  /* Espacio dentro del botón, al lado de las letras*/
    border: solid 1px black;  /*Opcional. Si lo quitas borras los bordes del botón*/
    color: black;   /* Color de las letras*/
    text-decoration: none;  /* Quita el subrayado de las letras*/
    transition: all 0.5s ease;  /* Para que la animacion sea suave y no tosca*/
}
.unode a:hover{
    color: white; /* Color que tomará las letras al pasar el mouse*/
}
.unode a{
    box-shadow: 0px 0px black inset, /*2*/
                          0px 0px black inset;
}
.unode a:hover{
    box-shadow: 250px 0px black inset,  /* Tamaño que cubrirá la animación*/
                          -250px 0px black inset;
}

Para hacer esta animación, si miran los sombreados, en el amarillo, después de inset vá una coma ","
y, el valor se duplica dejando uno negativo y otro positivo.



La Cuarta y última animación para este botón es de como la que ves a continuación:


.unode a{
    background: white;  /* Color de fondo*/
    font-size: 25px;  /* Tamaño de las letras del botón*/
    padding: 10px 25px;  /* Espacio dentro del botón, al lado de las letras*/
    border: solid 1px black;  /*Opcional. Si lo quitas borras los bordes del botón*/
    color: black;   /* Color de las letras*/
    text-decoration: none;  /* Quita el subrayado de las letras*/
    transition: all 0.5s ease;  /* Para que la animacion sea suave y no tosca*/
}
.unode a:hover{
    color: white; /* Color que tomará las letras al pasar el mouse*/
}
.unode a{
    box-shadow: 3px 0px black inset, /*2*/
                          0px -3px black inset;
}
.unode a:hover{
    box-shadow: 0px 250px black inset,  /* Tamaño que cubrirá la animación*/
                          0px -250px black inset;
}

Los códigos acá son muy parecidos a los anteriores, solo que el valor de  250px  negativo y positivo van después del valor 0, el primer sombreado también le cambie el valor para que notaran cual es su función.

Y hasta aquí las animaciones ahora les enseñaré como instalarlos en blogger:

Recuerda primero saber que animación te gustó para que no te confunadas con otras, si deseas tener todas las animaciones en el mismo blog a cada animación debes cambiarle el nombre de la clase (class="unode"), por cada animación un nombre de clase en el <div> y en el CSS. 

1- lo primero que aconsejo es integrar el código HTML y luego el CSS para darles los estilos que deseemos y corregir cualquier error.

2- El código HTML lo pegamos en una entrada o donde queramos, y que lo vallamos a usar.

3- Vamos a la plantilla y buscamos este código y, donde dice "aquí", lo borramos y pegamos el código CSS  "aquí"  ]]></b:template-skin>


ESPERO QUE HAYA SIDO DE AYUDA:

Contacto : garbuys@gmail.com

Entradas populares