Si quieres añadir uno, dos o mas botones en tu web y te gusta el color verde, este de aqui te gustara. Esta hecho totalmente con CSS en tono verde difuminado con efecto 'hover' en el mismo color. Lo primero que hay que hacer es añadir los estilos en el <body> de nuestra plantilla. Podemos cambiar el tamaño del texto y a su vez del boton, modificando el numero que esta en rojo.
<style type='text/css'>
.bverdegradient {
border-top: 1px solid #adadad;
background: #4dd417;
background: -webkit-gradient(linear, left top, left bottom, from(#133466), to(#4dd417));
background: -moz-linear-gradient(top, #133466, #4dd417);
padding: 7px 14px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white !important;
font-size: 30px;
font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}
.bverdegradient:hover {
border-top-color: #11a800;
background: #11a800;
color: #ffffff;
}
.bverdegradient:active {
border-top-color: #1b435e;
background: #1b435e;
}
</style>
|
Ahora, ya solo queda mostrarlo. Cada vez que quieras añadir un boton, pegas este codigo:
<a class="bverdegradient" href="URL ENLACE">TEXTO</a>
|
ejemplo del boton
