Tutorial: Botón de descarga con sólo CSS

lifecastro

Gamma
Diseñador
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario con pocos negocios!
Desde
20 Jun 2013
Mensajes
239
Un bonito botón de descarga para sus bloggers, funciona solo con CSS sin necesidad de algún archivo JavaScript, este botón 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 cuestiona de añadirle un poquito mas de programación, 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>

Insertar CODE, HTML o PHP:
 <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 solo tiene que agregar esta etiqueta en sus enlaces

Insertar CODE, HTML o PHP:
  <a href="#" [COLOR="#FF0000"]class="miboton"[/COLOR]>
                            Descargar
                        </a>

Para verlo en funcionamiento pueden observarlo en mi blog BitCreativo Botón
 

Carlos Arreola

Admin
Verificado con videollamada
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Ha verificado su Paypal!
¡Excelente comerciante!
Desde
6 Abr 2009
Mensajes
4.341
Agregado al listado de tutoriales, se agradece el aporte.
 

warkings

Eta
Redactor
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
26 Jul 2012
Mensajes
1.324
Muy bueno :encouragement:
 

YKMedia

Iota
Social Media
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
5 Ago 2013
Mensajes
2.445
No está nada mal, lo cambiaré por otro icono. Gracias :encouragement:
 

Tomorrowland

Beta
Verificación en dos pasos desactivada
Desde
16 Oct 2013
Mensajes
106
Me gusta mucho lo pero no para descargar si no para videos ocultos
 

User72

Gamma
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Ha verificado su Paypal!
¡Usuario con pocos negocios!
Desde
29 Ago 2013
Mensajes
268
Muy bueno, gracias!.
 

bdsg1

Gamma
Social Media
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
8 Mar 2012
Mensajes
427
Excelente muchas gracias!
 

promix

Beta
SEO
Verificación en dos pasos desactivada
¡Usuario con pocos negocios!
Desde
13 May 2013
Mensajes
119
se agradece el aporte :witless:
 

pvillegasy

Beta
Verificación en dos pasos desactivada
Desde
12 Ene 2013
Mensajes
30
Como podríamos hacer para que los usuarios comparta el blog en twitter o facebook antes de descargar un archivo?

gracias
 

tommy2032

Eta
Social Media
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
12 Ene 2012
Mensajes
1.261
buen tutorial
 

Arriba