Botones de Descarga

Hace ya creo un año atrás o puede ser hasta mas, descubrí este código HTML para webs, el cual le había adaptado a mi blog de GTA Ecuador, quise volver a buscar este asombroso efecto, pero de las búsquedas de google desapareció. Ahora que cambio mi blog de GTA Ecuador quiero compartirlo para que este estilo no se pierda.

Si encuentran al creador quiero darle las gracias por hacer este diseño en CSS.

Bueno, para implementar este diseño y otros tres más que hice haremos lo siguiente:

1) primero vamos a nuestro codigo HTML del blog.


Despues vamos a buscar la etiqueta ]]></b:skin> y pegan lo siguiente arriba.

.ab-download {
display:inline-block;
font-family:Arial;
background:#FCFCFC;
text-align:center;
border:1px solid #dadada;
box-shadow:0 2px 1px #dadada;
margin:30px 40px;
padding:15px;
border-radius:10px;
min-width:100px;
}

.ab-icon {
display:block;
width:90px;
height:90px;
margin:0 auto;
}

.ab-name {
color:#222;
font-style:italic;
}

.ab-size {
display:block;
padding:10px;
font-size:11px;
color:#888;
}

.download-message {
display:block;
margin:0 -30px;
cursor:pointer;
background:rgba(6,127,124,1);
background:linear-gradient(rgb(39,185,182), rgba(6,127,124,1));
box-shadow:0 2px 0 rgb(6,127,124);
text-align:center;
padding:15px;
color:white;
font-weight:bold;
}

.download-message:hover {
box-shadow: 0 0 4px rgba(6,127,124,0.4);
}
 
/*Tipos de archivo*/
.drive {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwnVVB0R-zYZLx0pBJVAZCactKIWtI2mRZsIOQ6QQcvuRmFpVjk3FNPWulF0QtY_MaN69Bw-uUMmoLTy11jyaKO2vKu1ZJac9mHrx6zMAzw6CcV61DjXxNfmH5tpkPkEwAeWH821Jq3Sk/s80-no/godrive.png) no-repeat center;
}
.mediafire {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpsvCkKOVtdIxGys9ZefgGd2ZVdG4cQW_0wnYpnDFPRBFaZLpStfCRvUjYB18ncSxS3VJvwPymWwzIcdoKUdWeBJAF1fFhprgNTchGkOisQdYSvNGpXvXrPRJrx9uaaEAyFK2jjL45nkI/s80-no/mfire.png) no-repeat center;
}
.mega {
background:url(https://lh6.googleusercontent.com/-_DIUrAZBfOo/VReDeu80xUI/AAAAAAAABR0/_t3kP5zG_fs/s89-no/mega.png) no-repeat center;
}
.share {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEMdryKxhO1lKJNqEsi82orUM5vqr8bR_aXZJdwkxpK3duJcicehYrO8tmYmzaTLuYWfIHL8JusRG4WNc5hUoJ2i3yC63Mn0_u4rVsKvEqdB64AwzjbZ5dxPgfZBul7KEe8URpGKQkvkI/s80-no/4shared.png) no-repeat center;
}
.download {
background:url(https://lh3.googleusercontent.com/-Lsvk42dJBAI/U3515p_cUoI/AAAAAAAAAxE/mLmZkpk58Aw/s80-no/download.png) no-repeat center;
}

Y ahora van a guardar la plantilla.

Despues de colocar el CSS, vamos a escribir el HTML.

Podemos crear una nueva entrada:


O tambien agregar esto a un Gadget.


El siguiente codigo HTML:

<center><div class="ab-download">
<span class="ab-icon drive"></span>
<span class="ab-name">DRIVE</span>
<span class="ab-size">1.27mb</span>
<a class="download-message" href="#" target="_blank">Descargar</a>
  </div></center>

Ahora guardan o terminan su entrada.

Ahora les enseñare a como utilizar este codigo con respecto al CSS. Pues veran, los colores que marcan una etiqueta sera usado en el HTML. especifico el color morado para que lo cambien y mantengan el espacio entre ab-icon y el nombre de la imagen.

Ahora pueden usar para los 3 servidores y uno si no es especifico o es descarga directa.

DRIVE 1.27mb Descargar

MEGA 1.27mb Descargar

MEDIAFIRE 1.27mb Descargar