Botones y barras de menú animadas con CSS3

En este artículo voy a recopilar un amplio listado de botones y barras de menú animadas para páginas web, basadas todas ellas en las propiedades exclusivas de los estilos CSS3: transiciones, redondeados, giros, sombreados, etc...

Como muchos ya sabréis, la versión CSS3 de los estilos CSS es la más avanzada actualmente, de forma que, aunque de desarrolló hace ya bastante tiempo, su implementación aún no está ni mucho menos completa en la totalidad de los navegadores, especialmente para los usuarios de las antiguas versiones de Internet Explorer. Si se usa un navegador actualizado (Firefox, Chrome, IE 8 o superior, etc...) la práctica totalidad del CSS3 sí será mostrado correctamente, de forma que estos botones y barras lucirán "con todo su esplendor". En caso contrario, los botones no funcionarán bien.

De este modo, antes de implementar este tipo de elementos en una web siempre recomiendo estar muy seguros de lo que se está haciendo (es decir, a qué público irá dirigida la página). Para conseguir, sencillamente, un efecto hover (es decir, que cuando se pase el puntero del ratón por encima del botón, éste cambie su aspecto), no es necesario emplear CSS3: con estilos sencillos CSS o a través de JScript puede lograrse lo mismo. Y de forma totalmente "segura" (funcionará de forma correcta en todos los equipos, pues son lenguajes totalmente implementados).

En cualquier caso, como ya hemos comentado, la versión 3 de CSS incluye algunos efectos interesantes, de forma que sólo usando CSS3 podremos conseguirlos (entre otros, nos referimos a diversas transiciones, giros de elementos, sombreados, redondeados de esquinas, transparencias / grados de opacidad, etc...). Teniendo en cuenta que día a día se encuentra cada vez más extendido, así como que es bastante sencillo de usar, el CSS3 empieza a ser claramente una opción interesante para el diseñador web.

A continuación incluyo algunos buenos ejemplos de este tipo de botones, menús y barras, para mi futuro uso personal y de cualquier visitante de este artículo. Cada uno de ellos incluye un enlace de previsualización (o demo), para que veamos cómo funciona y qué aspecto tiene. También se incluye enlace al artículo original de cada uno de estos recursos gratuitos, y enlace de descarga de los archivos editables ("Download Source File").

Queda por comentar que, si no visualizas correctamente el funcionamiento de los botones, convendría que actualizaras tu navegador a una versión reciente, pues estás usando uno ya obsoleto.

Botones animados CSS3, 7 versiones

( Demo | Download Source File )

Botón CSS3 con despliegue vertical en negro

( Demo | Download Source File )

4 barras de navegación animadas con CSS3

( Demo | Download Source File )

Botón con brillo (glow) animado con CSS3

( Demo | Download Source File )

Botones CSS3 con animación de burbujas

( Demo | Download Source File )

Control de volumen metalizado con jQuery y CSS3

( Demo | Download Source File )

Botones de color con hover y onclick

( Demo | Download Source File )