Entradas

Botones con CSS3

Botones con CSS3

Como crear botones con CSS3
Uno de los mejores implementos que podemos encontrar en CSS3 es el agregado de colores RGBA.


Esto nos permite aplicar degradados a nuestros botones, con solamente código CSS
Crear estos botones es muy sencillo, en este ejemplo los botones, además de ser estéticos, son escalables!

[html]
<title>Botones con CSS3</title>
<style type="text/css">
.boton, .boton:visited {
background: #222 url(alert-overlay.png) repeat-x;
display: inline-block;
padding: 5px 5px 6px;
color: #fff;
text-decoration: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor: pointer;
}

.boton:hover                            { background-color: #111; color: #fff; }
.boton:active                            { top: 1px; }
.boton, .boton:visited,
.large.boton, .large.boton:visited             { font-size: 20px; padding: 5px; }
.blue.boton, .blue.boton:visited        { background-color: #2daebf; }
.blue.boton:hover                            { background-color: #007d9a; }

</style>
[/html]

Ejemplo de Botones con CSS3




Por:


Entradas Relacionadas

Deja un comentario