Crear un elegante botón en menos de un minuto con CSS3
Como desarrollador web, nos encontramos a menudo la creación de botones para presentar los botones, enlaces y mucho más. Haciendo de esta manera a la antigua puede tomar mucho tiempo como sea necesario para abrir Photoshop y crear ese fondo degradado, efectos de sombra, etc
En este tutorial voy a mostrarte cómo crear una web muy elegante 2.0 botón CSS3 en menos de un minuto.
Puede echar un vistazo del resultado final aquí o se puede descargar aquí.
Primer paso
Vamos a empezar por crear el botón en la base de CSS.
border: 1px solid #5d9046; background: #67AA25; color: #fff; text-transform: uppercase; font-family: Arial, Helvetica, Sans-Serif; text-decoration: none; width: 156px; font-size: 14px; font-weight: bold; padding: 8px 0; text-align: center; display: block;
Esto nos va a dar a un botón cuadrado muy simple como se ilustra a continuación:
Bastante aburrido ¿eh? Estilo Seamos un poco XD
Creación de esquinas redondeadas
Ahora que hemos creado un botón de base, podemos crear esquinas redondeadas con facilidad gracias a CSS3.
Basta con añadir el siguiente código en su clase de botón para crear las esquinas redondeadas.
border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px;
Ahora nuestro botón tiene el siguiente aspecto:
Cómo añadir sombras
Gracias a CSS3 que puede añadir sombras a los cuadros de texto. He pegado a continuación algo de código para darle a su botón de estilo aún más:
text-shadow: 1px 1px 1px #666; -moz-box-shadow: 0 1px 3px #111; -webkit-box-shadow: 0 1px 3px #111; box-shadow: 0 1px 3px #111;
Este código añade sombra a nuestro texto, y para nuestros botones. Atractivo ¿eh?
Creación de un fondo de degradado de nuestro botón
Gracias a una impresionante aplicación creada recientemente por los creadores de ColorZilla, ahora podemos crear fácilmente degradados utilizando css3 sin tener que usar las imágenes.
Enlace: Editor de degradado
Usando el editor de gradiente, he creado mi trayectoria y el editor compilado el código siguiente que yo use:
background: #3F8EB5; /* old browsers */ background: -moz-linear-gradient(top, #3F8EB5 0%, #1D76A0 100%); /* firefox */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3F8EB5), color-stop(100%,#1D76A0)); /* webkit */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3F8EB5', endColorstr='#1D76A0',GradientType=0 ); /* ie */
Se cambia maravillosamente por lo que no tiene que preocuparse acerca de los navegadores más antiguos no ver a su botón etc
A continuación puedes ver el resultado final de nuestro botón:
Ahora puede seguir adelante y añadir :hover y :active pseudo-classe para que el botón aún más a la vida.
Espero que ustedes disfrutado de este tutorial!
Siéntase libre de dejar comentarios a continuación XD
Fuente: devmoose
Traducido Por: ElSaber21.com
Deja una respuesta