lunes, 11 de junio de 2012

Colección de botones y barras de menú animadas mediante estilos 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

Botón estilo barra con animación CSS3

( Demo | Download Source File )

 

Botón CSS3 con despliegue vertical en negro

Aspecto del botón CSS, por defecto, hover y activo

( Demo | Download Source File )

 

4 barras de navegación animadas con CSS3

Una de las barras y transiciones de contenidos animadas con CSS3.

( Demo | Download Source File )

 

Botón con brillo (glow) animado con CSS3

Aspecto del brillo conseguido en el hover de un botón a través de una transición CSS3

( Demo | Download Source File )

 

Botones de descarga y elementos UI (cuadro de búsqueda, interruptores, etc...) 

Uno de los diversos elementos de menú y botones incluidos en este set de alta calidad.

( Al tratarse de diversos elementos, consultar Demo y Descarga de archivos en cada uno de los elementos CSS3 incluidos en la web principal. Todos ellos son de alta calidad).

 

Botone CSS3 con animación de burbujas

Animación de burbujas en el interior del botón conseguida mediante CSS3

( Demo | Download Source File )

 

Control de volumen metalizado con jQuery y CSS3

Aspecto del elemento animado mediante CSS3 y jQuery, un manejador de volumen (elemento UI).

( Demo | Download Source File )

 

Botones CSS3 con iluminación animada mediante CSS3

3 opciones de transición de iluminación interna conseguidas mediante CSS3

( Demo | Download Source File )

 

Botones de color con hover y onclick

Botones CSS3 con efecto pulsado y hover.

( Demo | Download Source File )

 

Barra de menú con botones iluminados con transiciones de luz suave

Menú de navegación con botones iluminados de forma suave y elegante mediante CSS3.

( Demo | Download Source File )

Artículos relacionados:

2 comentarios:

Viviana Guerrero dijo...

Que buen aporte, me has sacado de un apuro con mi jefe ;)

Santi Folch dijo...

jeje me alegro mucho :)