Tutoriales Sobre Blogger: Como crear hermosos Botones con CSS3 para Blogger

Es este turorial veremos como crear Hermosos Botones con CSS3 para Blogger. Este tutorial es bastante sencillo y si tienes un poco de conocimiento en CSS podrás cambiar los colores a tu gusto





Demostración al final de esta entrada

Agregaremos el Estilo CSS a nuestra plantilla

• Paso 1: Vamos a Blogger>>Plantilla>> Edición HTML
• Paso 2: Buscamos la siguiente linea 

]]></b:skin>

• Paso 3: Justo por ensima de ]]></b:skin>, pegamos el estilo CSS

/* Engraved Buttons */
.engraved { background: rgba(0, 0, 0, .08); display: inline-block; padding: 5px; border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; }
.engraved a { color: #fff; border: 1px solid rgba(0, 0, 0, .3); display: inline-block; padding: .6em 1.2em; position: relative; text-decoration: none; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); }
.engraved a.red { background: #c60000; background: linear-gradient(top, #c60000 0%, #b20000 100%); background: -moz-linear-gradient(top, #c60000 0%, #b20000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c60000), color-stop(100%, #b20000)); background: -webkit-linear-gradient(top, #c60000 0%, #b20000 100%); }
.engraved a.orange { background: #f99015; background: linear-gradient(top, #f99015 0%, #f76c0f 100%); background: -moz-linear-gradient(top, #f99015 0%, #f76c0f 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f99015), color-stop(100%,#f76c0f)); background: -webkit-linear-gradient(top, #f99015 0%,#f76c0f 100%); }
.engraved a.green { background: #30a146; background: linear-gradient(top, #30a146 0%, #249334 100%); background: -moz-linear-gradient(top, #30a146 0%, #249334 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #30a146), color-stop(100%, #249334)); background: -webkit-linear-gradient(top, #30a146 0%, #249334 100%); }
.engraved a.blue { background: #16a4c8; background: linear-gradient(top, #16a4c8 0%, #1086b6 100%); background: -moz-linear-gradient(top, #16a4c8 0%, #1086b6 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #16a4c8), color-stop(100%, #1086b6)); background: -webkit-linear-gradient(top, #16a4c8 0%, #1086b6 100%); }
.engraved a.gray { background: #c2c2c2; background: linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); background: -moz-linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c2c2c2), color-stop(100%, #aeaeae)); background: -webkit-linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); }
.engraved a.dark { background: #464646; background: linear-gradient(top, #464646 0%, #343434 100%); background: -moz-linear-gradient(top, #464646 0%, #343434 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #464646), color-stop(100%, #343434)); background: -webkit-linear-gradient(top, #464646 0%, #343434 100%); }
.engraved a:hover, .engraved:hover { color: #fff; opacity: .5 } 

• Paso 4: Guardamos la Plantilla
• Paso 5: Para agregarlos a nuestra entrada agregaremos el codigo HTML a cual Representa

Botón Rojo

<span class="engraved"><a class="red" href="URL Enlace"> Botón Rojo</a></span> 

Botón Naranja

<span class="engraved"><a class="orange" href="URL Enlace"> Botón Naranja</a></span>

Botón Verde

<span class="engraved"><a class="green" href="URL Enlace"> Botón Verde</a></span>

Botón Azul

<span class="engraved"><a class="blue" href="URL Enlace"> Botón Azul</a></span>

Botón Gris

<span class="engraved"><a class="gray" href="URL Enlace">Boton Gris</a></span>

Botón Negro

<span class="engraved"><a class="dark" href="URL Enlace">Boton Negro</a></span>

Nota:- Solo debes de Cambia la URL del Enlace y el nombre del Botón