6 útiles recetas de botones CSS que puedes copiar y pegar

CSS3 está cambiando completamente el juego para crear botones en la web. Las técnicas que antes solo eran posibles con imágenes ahora son fácilmente ejecutables con solo unas pocas líneas de código. Para esta publicación, creamos seis botones CSS con un estilo atractivo para que usted pueda copiar y pegar en sus proyectos, sin necesidad de atribución.

Al igual que con cualquier cosa buena en CSS3, los botones a continuación funcionan bien en los navegadores Webkit y Mozilla, pero varias versiones de IE no serán suficientes.

Una nota rápida sobre la semántica

Los ejemplos a continuación son un poco pesados ​​en el formato HTML y muchos de ellos podrían ser fácilmente más ágiles. Los estructuré así para que pudiera mantener el CSS agradable y separado para varias partes del botón. Esto es para que pueda mezclar y combinar diferentes porciones de cada uno de los ejemplos a continuación. Si implementas alguno de estos, asegúrate de mirar de cerca tanto el CSS como el HTML para ver si puedes recortar el contenido.

Botón redondeado: dos líneas

A veces, una sola línea de texto simplemente no lo corta. Use este botón cuando tenga mucho que decir y quiera meterlo en un espacio pequeño. Para el estilo, usé un gradiente de # 99CF00 a # 6DB700 y algunos tratamientos de bordes simples.

HTML

<h3>Regístrate ahora gratis!</h3> <p>Prueba gratuita de riesgo de 30 días.</p>

CSS

.button {/ * estilos básicos * / ancho: 250 px; altura: 50px; color blanco; color de fondo: # 99CF00; text-align: center; tamaño de fuente: 30px; altura de línea: 50px; / * estilos de degradado * / fondo: -webkit-gradiente (lineal, 0% 0%, 0% 100%, de (# 99CF00), a (# 6DB700)); fondo: -moz-linear-gradient (19% 75% 90deg, # 6DB700, # 99CF00); / * estilos de borde * / borde izquierdo: sólido 1px # c3f83a; borde superior: sólido 1px # c3f83a; borde derecho: sólido 1px # 82a528; borde inferior: sólido 1px # 58701b; -moz-border-radius: 10px; -webkit-border-radius: 10px; radio del borde: 10px; -webkit-gradient (linear, 0% 0%, 0% 100%, desde (# 99CF00), hasta (# 6DB700))} .button h3 {font-size: 20px; línea de altura: 35px; Familia tipográfica: helvética, sans-serif; } .button p {font-size: 12px; línea de altura: 4px; Familia tipográfica: helvética, sans-serif; } a {texto-decoración: ninguno; color: fff; } .button: hover {background: -webkit-gradient (linear, 0% 0%, 0% 100%, desde (# 6DB700), hasta (# 99CF00)); fondo: -moz-lineal-gradiente (19% 75% 90deg, # 99CF00, # 6DB700); }

Píldora roja

Este botón rojo simple pero atractivo usa esquinas muy redondeadas para darle una forma de pastilla. Encontrará un degradado de fondo de # d46d45 a # b1432a y algunos efectos de borde leves en la parte superior e inferior. Una vez más, el efecto de desplazamiento es simplemente un efecto inverso.

HTML

<p>¡Presionarme!</p>

CSS

.button {/ * estilos básicos * / ancho: 250 px; altura: 50px; color blanco; color de fondo: # d46d45; text-align: center; tamaño de fuente: 30px; altura de línea: 50px; / * estilos de degradado * / fondo: -webkit-gradiente (lineal, 0% 0%, 0% 100%, de (# d46d45), a (# b1432a)); fondo: -moz-lineal-gradiente (19% 75% 90deg, # b1432a, # d46d45); / * estilos de borde * / border-top: solid 2px # e28d79; borde inferior: sólido 1px # 51281f; borde derecho: sólido 1px # d46d45; borde izquierdo: sólido 1px # d46d45; -moz-border-radius: 30px; -webkit-border-radius: 30px; radio del borde: 30px; } .button p {font-size: 25px; altura de línea: 50px; Familia tipográfica: 'Trebuchet MS', sans-serif; } a {texto-decoración: ninguno; color: fff; } .button: hover {background: -webkit-gradient (linear, 0% 0%, 0% 100%, desde (# b1432a), hasta (# d46d45)); fondo: -moz-lineal-gradiente (19% 75% 90deg, # d46d45, # b1432a); borde superior: sólido 2px # b1432a; borde inferior: sólido 1px # e28d79; }

Tipografía oscura

Aquí utilicé una técnica de impresión tipográfica para lograr un aspecto insertado en el texto. Básicamente, todo lo que haces es hacer que el texto sea más oscuro que el fondo y luego darle una sombra clara. Para el efecto de hover acabo de iluminar un poco los colores.

HTML

<p>Botón de inserción</p>

CSS

.button {/ * estilos básicos * / ancho: 250 px; altura: 70px; color: # 171717; color de fondo: # 4f4f4f; text-align: center; tamaño de fuente: 30px; altura de línea: 50px; / * estilos de degradado * / fondo: -webkit-gradiente (lineal, 0% 0%, 0% 100%, de (# 4f4f4f), a (# 1d1d1d)); fondo: -moz-linear-gradient (19% 75% 90deg, # 1d1d1d, # 4f4f4f); / * estilos de borde * / border-top: solid 2px # 8f8f8f; borde inferior: sólido 2px # 1a1a1a; borde izquierdo: sólido 2px # 4f4f4f; borde derecho: sólido 2px # 4f4f4f; -moz-border-radius: 10px; -webkit-border-radius: 10px; radio del borde: 10px; } .button p {font-size: 30px; línea de altura: 70px; Familia tipográfica: verdana, sans-serif; font-weight: negrita; text-shadow: 0px 2px 3px # 444; } a {texto-decoración: ninguno; color: fff; } .button: hover {background: -webkit-gradient (linear, 0% 0%, 0% 100%, desde (# 616161), hasta (# 292929)); fondo: gradiente lineal de moz (19% 75% 90deg, # 292929, # 616161); borde superior: sólido 2px # 8f8f8f; borde inferior: sólido 2px # 282828; } .button p: hover {text-shadow: 0px 2px 3px # 555; }

Belleza negra

Para este botón, realmente quería crear algo elegante y con clase. Para lograr esto, implementé tres trucos. Primero, apliqué algunos gradientes parados para darle ese aspecto brillante. A continuación, apliqué una sombra interior, que es un gran truco para agregar profundidad y efectos de iluminación. Finalmente, apliqué un ligero brillo a través del uso de una sombra de texto.Sobre la marcha, reduzco el brillo e intensifico la sombra.

HTML

<p>Brillo brillante</p>

CSS

.button {/ * estilos básicos * / ancho: 250 px; altura: 70px; color: #fff; color de fondo: # 000; text-align: center; tamaño de fuente: 30px; altura de línea: 50px; / * estilos de degradado * / fondo: -webkit-gradiente (lineal, superior izquierda, inferior izquierda, stop de color (0, # 2f2f2f), stop de color (.5, # 1e1f1f), stop de color (.51, # 0c0c0c), a (# 000)); fondo: -moz-lineal-gradiente (arriba, # 2f2f2f, # 1e1f1f 50%, # 0c0c0c 51%, # 000); / * estilos de borde * / border-top: solid 2px # 555; borde inferior: sólido 2px # 111; -moz-box-shadow: recuadro 0 0 15px # 000000; -webkit-box-shadow: recuadro 0 0 15px # 000000; cuadro de sombra: recuadro 0 0 15px # 000000; } .button p {font-size: 30px; línea de altura: 70px; Familia tipográfica: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; peso de la fuente: 300; text-shadow: 0px 0px 3px # 888; } a {texto-decoración: ninguno; color: fff; } .button: flotar {-moz-box-shadow: inserción 0 0 50px # 000000; -webkit-box-shadow: recuadro 0 0 50px # 000000; cuadro de sombra: inserción 0 0 50 px # 000000; } .button p: hover {text-shadow: 0px 0px 3px # 444; }

Píldora azul con el icono

El botón de la píldora azul combina los estilos brillantes del botón anterior con la forma de la píldora roja desde arriba. Otra vez utilicé algunos degradados brillantes y en la sombra interior, pero para hacer las cosas interesantes, agregué un ícono: un pequeño lápiz. Lo mejor de este ícono es que no requiere ninguna fuente especial, ¡solo HTML! Es una pequeña adición que puede realmente dar un toque de toque a un botón de contacto sin ningún esfuerzo.

HTML

<p>Escríbanos ✎ </p>

CSS

.button {/ * estilos básicos * / ancho: 250 px; altura: 50px; color: #fff; color de fondo: # 125182; text-align: center; tamaño de fuente: 30px; altura de línea: 50px; / * estilos de degradado * / fondo: -webkit-gradiente (lineal, superior izquierda, inferior izquierda, stop de color (0, # 125182), stop de color (.5, # 1269ab), stop de color (.51, # 004375), a (# 00345b)); fondo: -moz-lineal-gradiente (arriba, # 125182, # 1269ab 50%, # 004375 51%, # 00345b); / * estilos de borde * / -moz-border-radius: 30px; -webkit-border-radius: 30px; radio del borde: 30px; -moz-box-shadow: inserción 0 0 10 px # 000000; -webkit-box-shadow: recuadro 0 0 10px # 000000; cuadro de sombra: recuadro 0 0 10 px # 000000; } .button p {font-size: 30px; altura de línea: 50px; Familia tipográfica: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; peso de la fuente: 300; text-shadow: 0px 0px 3px # 555; } a {texto-decoración: ninguno; color: fff; } .button: flotar {-moz-box-shadow: inserción 0 0 50px # 000000; -webkit-box-shadow: recuadro 0 0 50px # 000000; cuadro de sombra: inserción 0 0 50 px # 000000; } .button p: hover {text-shadow: 0px 0px 3px # 888; }

Botones Me gusta / No me gusta

Aquí creé dos botones circulares destinados a implementar un sistema de clasificación simple. El botón verde significa un voto positivo y el rojo un voto negativo. Al igual que con el último botón, los iconos aquí son puramente HTML y no requieren trucos de @ font-face.

HTML

<p>☝</p> <p>☟</p>

CSS

.green {background-color: # 00ab26; } .red {color de fondo: # d90004; } .botón {/ * estilos básicos * / ancho: 100 px; altura: 100px; color: #fff; text-align: center; tamaño de fuente: 30px; altura de línea: 50px; flotador izquierdo; margen derecho: 20px; / * estilos de degradado * / / * estilos de borde * / -moz-border-radius: 50px; -webkit-border-radius: 50px; radio del borde: 50px; / * estilos de sombra * / -moz-box-shadow: 2px 3px 5px #bfbfbf; -webkit-box-shadow: 2px 3px 5px #bfbfbf; box-shadow: 2px 3px 5px #bfbfbf; } .button p {font-size: 50px; altura de línea: 100px; Familia tipográfica: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; peso de la fuente: 300; text-shadow: 0px 0px 3px # 888; } a {texto-decoración: ninguno; color: fff; } .button: hover {-moz-box-shadow: inset 0 0 30px # 444; -webkit-box-shadow: recuadro 0 0 30px # 444; cuadro de sombra: recuadro 0 0 30 px # 444; } .button p: hover {text-shadow: 0px 0px 4px #fff; }

Conclusión

Espero que estos botones te sean de utilidad. Incluso si las limitaciones del navegador hacen que algunas de estas no estén listas para su implementación, aún ofrecen excelentes ejemplos de aprendizaje para algunas de las nuevas e increíbles funciones de CSS3.

Deja un comentario y déjanos saber lo que piensas!