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.

01
02
03
04
05
06
07
08
09
10
11
12
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.

1
2
3
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:

1
2
3
4
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:

1
2
3
4
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