En este tutorial aprenderas a hacer un boton bastante realista usando solamente propiedades exclusivas de CSS3.
HTML Base
Empezamos con un HTML vacio y con un elemento button que llevara la clase de .botoncito.
Ademas de un espacio del CSS correspondiente.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
<style>
.botoncito{
}
.botoncito:active{
}
</style>
</head>
<body>
<button class="botoncito">Comprar</button>
</body>
</html>
Si pruebas esto veras un boton con los estilos predefinidos de tu sistema operativo, empezaremos reseteando estos estilos, para eso añade la siguiente propiedad:
button::-moz-focus-inner { border: 0; } /* FIX para Firefox */
.botoncito{
border:0;
}
Basta con añadir border:0; y los estilos por defecto se van.
Ademas le agregaremos un poco de espacio, tamaño y color de fuente:
.botoncito{
border:0;
color: #668428;
font-size: 48px;
font-family:sans-serif;
padding: 30px 50px;
}
Fondo de gradiente CSS3
Ahora nos toca agregar el fondo, usaremos un gradiente CSS3 (tanto para navegadores -moz- como para -webkit-):
.botoncito{
border:0;
color: #668428;
font-size: 48px;
font-family:sans-serif;
padding: 30px 50px;
background: -moz-linear-gradient(center top , #CDEB8E 0%, #A5C956 100%) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cdeb8e), color-stop(100%,#a5c956));
}
Bordes redondeados
Para los bordes redondeados usaremos la propiedad CSS3 border-radius:
.botoncito{
border:0;
color: #668428;
font-size: 48px;
font-family:sans-serif;
padding: 30px 50px;
background: -moz-linear-gradient(center top , #CDEB8E 0%, #A5C956 100%) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cdeb8e), color-stop(100%,#a5c956));
border-radius: 30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
}
Con esto vemos que va tomando forma:
Texto con sombra
Vamos a mejorar ahora el texto, haciendo uso de text-shadow para darle un efecto de texto en bajo relieve:
text-shadow: 1px 1px 1px #E1FEA6;
Si lo vemos con detenimiento podemos notar el efecto:
Sombra del elemento
Para darle un poco mas de realismo le añadiremos tambien una sombra al boton en si, usaremos moz-box-shadow para Firefox y -webkit-box-shadow para Chrome y la version oficial sin prefijos:
box-shadow: 0px 6px 0 #819F45; -moz-box-shadow: 0px 6px 0 #819F45; -webkit-box-shadow: 0px 6px 0 #819F45;
El resultado:
Estado :active
Esta es la parte que le dara mas realismo a nuestro boton, cuando le agregemos los estilos para cuando el boton sea ‘presionado’ (:active).
Lo primero que haremos es hacer que cuando sea presionado el boton, se mueva 3px hacia abajo:
.botoncito:active{
position:relative;
top:3px;
}
Lo segundo es decirle que el valor vertical del -box-shadow pase de 6px a 3px, dandole un efecto de presionado al boton:
.botoncito:active{
position:relative;
top:3px;
box-shadow: 0px 3px 0 #819f45;
-moz-box-shadow:0px 3px 0 #819F45;
-webkit-box-shadow:0px 3px 0 #819F45;
}
Con eso ya estaria bien, pero si queremos podemos hacer que los colores de los gradientes se inviertan, para darle aun mas realismo:
.botoncito:active{
position:relative;
top:3px;
box-shadow:0px 3px 0 #819F45;
-moz-box-shadow:0px 3px 0 #819F45;
-webkit-box-shadow:0px 3px 0 #819F45;
background: -moz-linear-gradient(center top , #A5C956 0%, #CDEB8E 100%) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5c956), color-stop(100%,#cdeb8e));
}
Con eso finalizamos nuestro boton, espero te haya gustado y prueba a mejorarlo agregandole mas efectos.
Este artículo me parece muy completo ya que esta lleno de información importante.
Me encanto el resultado.
Pero debe haber una manera para que se pueda ver en todos los navegadores ya que ahora todos soportan html5/css3
Muy buena la información realmente necesitaba aprender a hacer botones;
@Faroth para que se puedan ver en todos los navegadores ya existen etiquetas estas son:
Aplicadas a los bordes redondeados:
-moz-border-radius:10px 10px;
-webkit-border-radius:10px 10px;
-o-border-radius:10px 10px;
-webkit- es para el Chrome
-o- para el opera
ineresante … pero soy pupilo y la forma como se hacer funcional un boton no me sirve, como
hago que sea funcional que me muestre por lo menos … echo «mensaje»;
Leete un par de tutoriales de Javascript https://tursos.com/categoria/tutoriales/javascript
ok… nesecito crear un red social.. por lo menos basica… que me aconsejas, por donde empiezo,
tengo conocimiento sobre lo de las bases de datos.. pero lo que necesito tambien es lo grafico asi como el facebook y el twitter..seria de gran ayuda tu pronta respuesta ..gracias
Sabes lo dificil que seria crear una red social? primero que nada antes de tener si quiera la idea necesitas estar rodeado de como minimo 20 profesionales ya sea de programadores, disenadores, asesores de marketing, analistas y sobre todo de inversionistas que confien en tu proyecto.
solo es un proyecto de colegio.. necesito lo basico
Mmm, entiendo mira puedes utilizar BuddyPress es una excelente extension de WordPress que te instala una red social.
Sirve en IE 8 ó – ????
Se ve en IE, pero no tan bonito como en Chrome/FF/Opera
En Firefox 13 ya no funciona 🙁