Creamos una serie de botones con colores y efectos al pasar el ratón sobre ellos, únicamente con CSS 3.
Lo primero que vamos a ver seré el código html necesario para mostrar nuestro botón.
Partimos de que cada botón tendrá una clase que vendrá dada por el tamaño que queremos mostrar y el color del botón.
Si vemos el código nos quedará más claro:
<a class="button pequeno azul" href="#"><span>Botón</span></a>
Cómo podéis ver tenemos la clase boton pequeno azul, pero podría ser boton mediano rojo, o similar, siempre manteniendo fija la clase boton que es la principal y la que nos va a dibujar el botón.
Una vez que tenemos esto en nuestro archivo html, tenemos que irnos al archivo css donde vamos a crear los estilos necesarios para mostrar nuestros botones.
Empezamos creando el estilo boton:
.button, .button span {
display: inline-block;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.button {
white-space: nowrap;
line-height:1em;
position:relative;
outline: none;
overflow: visible;
cursor: pointer;
border: 1px solid #999;
border: rgba(0, 0, 0, .2) 1px solid;
border-bottom:rgba(0, 0, 0, .4) 1px solid;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
background: -moz-linear-gradient(
center top,
rgba(255, 255, 255, .1) 0%,
rgba(0, 0, 0, .1) 100%
);
background: -webkit-gradient(
linear,
center bottom,
center top,
from(rgba(0, 0, 0, .1)),
to(rgba(255, 255, 255, .1))
);
-moz-user-select: none;
-webkit-user-select:none;
-khtml-user-select: none;
user-select: none;
margin-bottom:10px;
}
.button.full, .button.full span {
display: block;
}
.button:hover, .button.hover {
background: -moz-linear-gradient(
center top,
rgba(255, 255, 255, .2) 0%,
rgba(255, 255, 255, .1) 100%
);
background: -webkit-gradient(
linear,
center bottom,
center top,
from(rgba(255, 255, 255, .1)),
to(rgba(255, 255, 255, .2))
);
}
.button:active, .button.active {
top:1px;
}
.button span {
position: relative;
color:#fff;
text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);
border-top: rgba(255, 255, 255, .2) 1px solid;
padding:0.6em 1.3em;
line-height:1em;
text-align:center;
white-space: nowrap;
}
El código no vamos a pasar a comentarlo linea a linea ya que damos por sentado que habéis leído nuestro manual de CSS 3 y comprendéis dicha nomenclatura.
Sólo destacar que hemos utilizado los prefijos moz- y webkit- para que sea compatible con varios navegadores, como son Firefox, Chrome y Safari, y que además hemos creado el efecto de cambiar un poco el color de fondo al pasar el ratón sobre el botón. Esto lo hemos realizado en el estilo .boton:hover, .boton.hover
Una vez que tenemos el estilo del botón vamos a crear diferentes estilos para los tamaños:
.button.pequeno span {
font-size:12px;
}
.button.mediano span {
font-size:16px;
}
.button.grande span {
font-size:22px;
}
Con esto ya sólo nos queda los estilos para los colores, aquí podéis crear tantos estilos como colores queráis poder implementar en vuestros botones.
Un ejemplo de estilos para 3 colores por ejemplo sería el siguiente:
.button.rojo {
background-color: #e62727;
}
.button.naranja {
background-color: #ff5c00;
}
.button.azul {
background-color: #00ADEE;
}
Y terminamos nuestro CSS quitando el subrayado a nuestros enlaces para que no aparezcan los botones con ello.
A{
color: #0000cc;
text-decoration: none;
}
Con esto tenemos todo lo necesario para mostrar nuestros botones. Podemos ver el ejemplo funcionando en una página aparte.
Para finalizar os dejo el código completo del archivo .html y del .css
Boton.html
<!DOCTYPE html>
<html>
<head>
<title>Botones CSS 3</title>
<link rel="stylesheet" href="botones-css3.css" type="text/css">
</head>
<body>
<a class="button pequeno rojo" href="#"><span>Botón</span></a>
<br>
<a class="button mediano naranja" href="#"><span>Botón</span></a>
<br>
<a class="button grande azul" href="#"><span>Botón</span></a>
</body>
</html>
<a class="boton pequeno gris" href="#"><span>Botón</span></a>
</body>
</html>
boton-css3.css
.button, .button span {
display: inline-block;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.button {
white-space: nowrap;
line-height:1em;
position:relative;
outline: none;
overflow: visible;
cursor: pointer;
border: 1px solid #999;
border: rgba(0, 0, 0, .2) 1px solid;
border-bottom:rgba(0, 0, 0, .4) 1px solid;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
background: -moz-linear-gradient(
center top,
rgba(255, 255, 255, .1) 0%,
rgba(0, 0, 0, .1) 100%
);
background: -webkit-gradient(
linear,
center bottom,
center top,
from(rgba(0, 0, 0, .1)),
to(rgba(255, 255, 255, .1))
);
-moz-user-select: none;
-webkit-user-select:none;
-khtml-user-select: none;
user-select: none;
margin-bottom:10px;
}
.button.full, .button.full span {
display: block;
}
.button:hover, .button.hover {
background: -moz-linear-gradient(
center top,
rgba(255, 255, 255, .2) 0%,
rgba(255, 255, 255, .1) 100%
);
background: -webkit-gradient(
linear,
center bottom,
center top,
from(rgba(255, 255, 255, .1)),
to(rgba(255, 255, 255, .2))
);
}
.button:active, .button.active {
top:1px;
}
.button span {
position: relative;
color:#fff;
text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);
border-top: rgba(255, 255, 255, .2) 1px solid;
padding:0.6em 1.3em;
line-height:1em;
text-align:center;
white-space: nowrap;
}
.button.pequeno span {
font-size:12px;
}
.button.mediano span {
font-size:16px;
}
.button.grande span {
font-size:22px;
}
.button.rojo {
background-color: #e62727;
}
.button.naranja {
background-color: #ff5c00;
}
.button.azul {
background-color: #00ADEE;
}
A{
color: #0000cc;
text-decoration: none;
}