Botones Deluxe

 Vamos a ver como crear unos botones muy guapos para utilizarlos en nuestro blog o web. Con un poco de HTML y CSS se consiguen maravillas visuales. En este caso, una clase de boton muy elegante azul difuminado en negro, que al pasar el cursor se invierten los colores.

Primero, añadimos los estilos CSS, en Blogger antes de ]]></b:skin>

VER CODIGO

/* Boton Deluxe
patrocinado por REDEANDO - http://redeando.blogspot.com/
----------------------------------------------- */
.Botondeluxe {&nbsp;&nbsp; &nbsp;-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;&nbsp;&nbsp; &nbsp;-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;&nbsp;&nbsp; &nbsp;box-shadow:inset 0px 1px 0px 0px #ffffff;&nbsp;&nbsp; &nbsp;background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #4161e0), color-stop(1, #030303) );&nbsp;&nbsp; &nbsp;background:-moz-linear-gradient( center top, #4161e0 5%, #030303 100% );&nbsp;&nbsp; &nbsp;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4161e0', endColorstr='#030303');&nbsp;&nbsp; &nbsp;background-color:#4161e0;&nbsp;&nbsp; &nbsp;-moz-border-radius:6px;&nbsp;&nbsp; &nbsp;-webkit-border-radius:6px;&nbsp;&nbsp; &nbsp;border-radius:6px;&nbsp;&nbsp; &nbsp;border:1px solid #dcdcdc;&nbsp;&nbsp; &nbsp;display:inline-block;&nbsp;&nbsp; &nbsp;color:#ffffff !important;&nbsp;&nbsp; &nbsp;font-family:arial;&nbsp;&nbsp; &nbsp;font-size:19px;&nbsp;&nbsp; &nbsp;font-weight:bold;&nbsp;&nbsp; &nbsp;padding:6px 24px;&nbsp;&nbsp; &nbsp;text-decoration:none;&nbsp;&nbsp; &nbsp;text-shadow:1px 1px 0px #cdcdcd;}.Botondeluxe:hover {&nbsp;&nbsp; &nbsp;background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #030303), color-stop(1, #4161e0) );&nbsp;&nbsp; &nbsp;background:-moz-linear-gradient( center top, #030303 5%, #4161e0 100% );&nbsp;&nbsp; &nbsp;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#030303', endColorstr='#4161e0');&nbsp;&nbsp; &nbsp;background-color:#030303;}.Botondeluxe:active {&nbsp;&nbsp; &nbsp;position:relative;&nbsp;&nbsp; &nbsp;top:1px;}

Y ahora editamos un gadget HTML, en un post o donde queramos ubicar el o los botones y pegamos este codigo de llamada:

<a class="Botondeluxe" href="URL">TEXTO</a>

(Cada vez que pongamos este codigo, aparecera un boton. Solo tenemos que reemplazar donde pone URL por la direccion a la que queramos que nos dirija y donde pone TEXTO por el nombre que queramos mostrar)

Y asi nos quedara de bien

REDEANDO Google