Botones CSS: tutoriales y ejemplos
Crear botones con CSS es una de las técnicas de diseño web más experimentadas. Los ejemplos y tutoriales abundan.
La mayor tendencia reciente en el diseño de botones CSS parece ser la eliminación de imágenes, especialmente imágenes de fondo, de los botones. Pero hay muchas otras cosas que los diseñadores están haciendo con los botones, algunos que sí incluyen imágenes.
A continuación hemos recopilado más de veinte tutoriales, ejemplos y herramientas para crear botones CSS, la mayoría de los cuales usan CSS3.
Se incluyen botones para adaptarse a prácticamente todos los estilos de diseño. Intentamos enfocarnos en técnicas más nuevas aquí, dejando de lado las técnicas antiguas (como la método de puerta corredera para crear esquinas redondeadas) que la mayoría de los diseñadores ya conocen.
Si tiene otros tutoriales o ejemplos que le gustaría compartir, hágalo en los comentarios.
Tutoriales y artículos
Redescubriendo el elemento del botón
Un artículo realmente útil sobre el tema button elemento en CSS, que a menudo se pasa por alto por los diseñadores. Es un poco más antiguo, pero todavía tiene toneladas de información útil para crear botones más elegantes con CSS.
Hermosos botones CSS con conjunto de iconos
Aquí hay otro artículo que habla sobre cómo crear botones con iconos, aunque usando span clases en lugar de la button elemento.
Construye kick-ass prácticos botones CSS3
Este video tutorial de Nettuts + muestra cómo crear botones prácticos de CSS3 que incluso incluyen lo que parece ser una imagen de icono de pájaro de Twitter, pero de hecho está creado completamente con CSS3.
Hermosos botones estilo Photoshop con CSS3
Si bien los botones aquí no son particularmente vanguardistas en términos de apariencia, lo sorprendente es que se crearon completamente con CSS3, sin usar imágenes, y solo se basaron en botones creados en Photoshop.
Mejor botón e interacciones de navegación
Este es un excelente y sencillo tutorial de Darren Hoyt sobre la creación de mejores comportamientos para sus botones que alientan a los visitantes a interactuar con su sitio.
Botones súper increíbles con CSS3 y RGBA
Este tutorial de Zurb cubre el uso de CSS3 y fusión alfa usando RGBA para crear botones escalables con una sola imagen PNG.
Construyendo hermosos botones con gradientes de CSS
Un tutorial para construir un botón usando gradientes de CSS similares a los usados por Mozilla for Firefox Personas.
Cómo diseñar un botón sexy usando CSS
Este tutorial muestra cómo crear un botón grande y vibrante sin usar imágenes.
Realista buscando botones CSS3
Estos son botones simples, creados completamente con CSS3, incluidos algunos pseudoelementos.
Bonitos botones CSS3
Este tutorial muestra cómo crear un botón simple, ligeramente brillante, escalable y se puede crear en cualquier color sin imágenes.
Botones CSS3 sin imágenes
Un tutorial simple para crear botones dinámicos que usan solo CSS3 y sin imágenes. Hay cuatro estados para cada botón, incluidos los estados deshabilitados, suspendidos y en los que se hace clic.
5 diferentes tutoriales de esquinas redondeadas CSS dinámicas botones de enlace
Esta es una colección de cinco tutoriales diferentes para crear botones CSS con esquinas redondeadas. Dos incluyen el uso de imágenes, pero los otros tres no.
Crea un botón CSS3 que se degrada bien
Hasta que todos los navegadores sean compatibles con CSS3, vamos a tener problemas al usarlo para crear cosas como botones. Este tutorial muestra cómo crear excelentes botones CSS3 que también se ven bien en navegadores antiguos, como IE6 y 7.
La barra de navegación de Apple usa solo CSS
Este tutorial muestra cómo recrear el menú de navegación con estilo de botón en el sitio web de Apple. Funciona mejor en Safari 3+, pero aún se ve bien en otros navegadores.
Crear un botón de llamada a la acción de CSS3
Este tutorial muestra cómo crear un botón de llamada a la acción completamente con CSS que incluye diferentes estados predeterminados y de desplazamiento.
Botones atractivos con CSS3
Este sencillo tutorial muestra cómo crear botones de estilo agradable con un vuelo estacionario único y estados activos. Los botones se pueden escalar y su color se puede cambiar fácilmente.
Botones brillantes sin imágenes usando solo CSS3
Al mirar estos botones, es difícil creer que están hechos sin imágenes a menos que los mires muy de cerca. El código es complicado, pero el resultado final se ve genial, completo con efecto de desplazamiento.
Botones CSS3 con iconos
Este tutorial muestra cómo crear botones CSS3 con degradados que también incluyen imágenes de iconos y son compatibles con varios navegadores.
Haz rodar tus propios botones de Google
Este tutorial muestra cómo hacer botones escalables estilo Google con bordes de colores. Los resultados finales son minimalistas y limpios.
Ejemplos y herramientas
10 increíbles botones CSS3 para usar en tu sitio web
Aquí hay una colección de diez botones que puede usar en su sitio web. Todos son bastante básicos, pero se crean utilizando solo CSS3 sin imágenes.
Botones de degradado CSS3
Esta es una gran colección de botones CSS3 de Web Designer Wall. Se incluyen una variedad de formas, tamaños y colores, todos con degradados. Sin embargo, una de las mejores partes de ellos es cuán elegantemente se degradan estos botones en los navegadores que no tienen soporte completo para CSS3.
Creador de botones
CSS-Tricks ofrece este creador de botones CSS3 gratuitos. Simplemente defina los colores de fondo para cada estado del botón, el tamaño y los atributos del texto, y creará el código CSS para usted.
Botones radiactivos
Estos botones usan animaciones CSS en Safari para crear un efecto pulsante y brillante. En otros navegadores compatibles con CSS3, siguen siendo perfectamente funcionales y se ven muy bien.
¿Conoces otras técnicas para crear increíbles botones CSS que no se mencionaron aquí? ¿O tienes un ejemplo favorito? Por favor, compártalos en los comentarios!