botones-css

Botones animados con transiciones CSS3

En este speed post de hoy veremos cómo sacarle partido al CSS3 y crearemos botones de menú animados con transiciones.

Utilizando la propiedad de transición CSS3 crearemos, además, un efecto de gradiente, cada vez que pases el cursor por encima de cada elemento. Como una imagen vale más que mil palabras, un poco más abajo puedes ver lo que vamos a hacer.


Menú CSS3 con transiciones

Este es el código.

HTML

<div id="menubar1">
 <a href="#">Inicio</a><a href="#">Quienes Somos</a><a href="#">Servicios</a><a href="#">Trabajos</a><a href="#">Contacto</a>
</div>

CSS

#menubar1{ padding: 20px; border:#999 1px dashed; }
#menubar1 > a{
 font-family:Arial, Helvetica, sans-serif;
 font-size:17px;
 background: #333;
 padding: 12px 12px;
 color:#999;
 margin-right: 10px;
 text-decoration:none;
 border-radius: 3px;
 transition: background 0.3s linear 0s, color 0.3s linear 0s;
transition-duration: 1s;
}
#menubar1 > a:hover{
 background: #6F8A00;
 color:#FFF;
}

Como verás, nada del otro mundo pero con esto conseguimos crear menús más atractivos.

Si quieres saber más acerca de las transiciones CSS te recomiendo esta página.

A medida que escribía este post se me ocurrió añadir algo más para mejorar el aspecto de una web. Aplicarlo a la nube de etiquetas de WordPress.

Botones CSS3 para mostrar la nube de etiquetas de nuestro blog

Algunos temas personalizan la nube de etiquetas, haciéndolas más visuales.

Vamos a usar este mismo ejemplo para mostrar la nube de etiquetas/categorías, de nuestro blog, mejorando su aspecto.

Si quieres ver un ejemplo busca, en la barra lateral de esta web, la sección categorías. Eso es lo que vamos a hacer.

nube-etiquetasPara este ejemplo vamos a hacer uso de un tema hijo del Twenty Fifteen.

Cuando arrastras el widget de nube de etiquetas a la barra lateral, esta muestra, según hayas escogido, una nube de etiquetas/categorías. Como ves, muestra los enlaces tal cual, viéndose bastante pobre.

Haciendo uso del inspector de código de tu navegador verás que las etiquetas tienen la clase tagcloud.

Pues eso es lo que necesitamos. Modifica #menubar1 y cámbialo por .tagcloud. O simplemente añade el siguiente CSS a tu tema.

.tagcloud{ padding: 6px; border:#999 1px dashed; }
.tagcloud > a{
 font-family:Arial, Helvetica, sans-serif;
 font-size:11px;
 background: #333;
 padding: 3px 3px;
 color:#999;
 margin-right: 5px;
 text-decoration:none;
 border-radius: 3px;
 transition: background 0.3s linear 0s, color 0.3s linear 0s;
}
.tagcloud > a:hover{
 background: #F6D420;
 color:#FFF;
}

Ahora, si actualizas la página, verás el nuevo aspecto de la nube de etiquetas.

nube-etiquetas-cssCustomízalo a tu gusto.

Espero que este post te haya resultado útil.

Fuente: Developphp

Comenta, comparte, difunde. Gracias.

Carlos A para FreelanceEvolution®

Deja un comentario

Your email address will not be published.Los campos requeridos están marcados *