Boton de Descarga con solo CSS para Blogger

Hoy les traigo un bonito botón de descarga para sus bloggers, funciona solo con CSS sin necesidad de algun archivo JavaScript, este boton lo uso en mi blog para los enlaces de descargas de recursos o cualquier otro tipo de descargas, puede ser usado para darle funciones o como input seria cuestion de añadirle un poquito mas de programacion, yo solo les explicare como usarlo de enlace de descarga.

Primero pegaremos este código antes de la etiqueta </head> para eso iremos a Plantilla > Editar HTML presionamos control+f y buscamos </head>

 <style type="text/css"/>

.miboton {
 background-color:#3bb3e0;
 font-family: 'Open Sans', sans-serif;
 font-size:12px;
 text-decoration:none;
 color:#fff;
 position:relative;
 padding:10px 20px;
 padding-right:50px;
 background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
 background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
 background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
 background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
 background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
 background-image: -webkit-gradient(
 linear,
 left bottom,
 left top,
 color-stop(0, rgb(44,160,202)),
 color-stop(1, rgb(62,184,229))
 );
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 -o-border-radius: 5px;
 border-radius: 5px;
 -webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
 -moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
 -o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
 box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
 color:#fff;
}

.miboton:active {
 top:3px;
 background-image: linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
 background-image: -o-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
 background-image: -moz-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
 background-image: -webkit-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
 background-image: -ms-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
 background-image: -webkit-gradient(
 linear,
 left bottom,
 left top,
 color-stop(0, rgb(62,184,229)),
 color-stop(1, rgb(44,160,202))
 );
 -webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
 -moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
 -o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
 box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
}

.miboton::before {
 background-color:#2591b4;
 background-image:url(../images/right_arrow.png);
 background-repeat:no-repeat;
 background-position:center center;
 content:"";
 width:20px;
 height:20px;
 position:absolute;
 right:15px;
 top:50%;
 margin-top:-9px;
 -webkit-border-radius: 50%;
 -moz-border-radius: 50%;
 -o-border-radius: 50%;
 border-radius: 50%;
 -webkit-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;
 -moz-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;
 -o-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;
 box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;
}

.miboton:active::before {
 top:50%;
 margin-top:-12px;
 -webkit-box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6;
 -moz-box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6;
 -o-box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6;
 box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6;
}

</style>

Y para hacerlo funcionar en su enlace de descarga solo debemos agregrar la etiqueta class="miboton" en nuestros enlaces aca les muestro como:

<a href="URL" class="miboton"> Descarga </a>

Demostracion

Descarga

Compartelo! Be Social♥

Unknown

Diseñador gráfico y creativo, desarrollador de sitios web y un futuro iluminatis, blogger en tiempos libres y me encanta compartir conocimientos con los demas. José Castro en Google+