Botones con CSS3

Por Noticias0

botones-css31.jpg

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

Comenta

Tu Email no será publicado. Campos requeridos *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.