Set de botones CSS3 para descargas

Cuando queremos poner una descarga en nuestro blog/web, podemos añadir un simple enlace de texto o una imagen, pero sin duda, lo que mejor queda es un buen boton. En este caso te traigo estos 6 botones con el mismo diseño, pero cada uno con un color diferente. Estan realizados integramente con CSS3 (no contienen ninguna imagen), tienen su funcion hover, su flechita y su efecto presionado. Y como se suele decir, para muestra un boton, en este caso seis, jejeje. Aqui debajo los teneis para que veais como quedan.

Para ponerlos en tu pagina, primero añades este codigo de estilos CSS3 en tu plantilla.

<style>
a.botondescarga {
    position: relative;
    padding: 12px 30px 15px 60px;
    cursor: pointer;color:#000000 !important;
    text-align: left;
    font-weight: bold;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 2px 2px 2px 0 rgba(0,0,0,.3);
    -moz-box-shadow: 2px 2px 2px 0 rgba(0,0,0,.3);
    box-shadow: 2px 2px 2px 0 rgba(0,0,0,.3);
    display: inline-block !important;
    font: 700 17px 'Arial', Helvetica, Clean, sans-serif;
    margin: 0px 0px 20px 10px;
    position: relative;
    text-decoration: none;
    transition: background-position .2s ease, margin .1s ease;
    -webkit-transition: background-position .2s ease, margin .1s ease;
    -moz-transition: background-position .2s ease, margin .1s ease;
    background-repeat: repeat-x;
}

a.botondescarga:hover { background-position: 0 10px;color:#ffffff !important;transition: 0.5s ease;
    -webkit-transition: 0.5s ease;
    -moz-transition: 0.5s ease; }

a.botondescarga:active {
    -webkit-box-shadow: -1px -1px 2px 0 rgba(0,0,0,.3);
    -moz-box-shadow: -1px -1px 2px 0 rgba(0,0,0,.3);
    box-shadow: -1px -1px 2px 0 rgba(0,0,0,.3);
    margin: 2px 0 20px 10px;
}

a.botondescarga span.bar {
    width: 1px;
    height: 30px;
    position: absolute;
    background: black;
    top: 5px;
    left: 50px;
}

a.botondescarga div.flecha {
    position: absolute;
    left: 20px;
    top: 14px;
}

a.botondescarga div.flecha span.top {
    position: absolute;
    width: 6px;
    height: 9px;
    background: #000;
    top: 0;
    left: 3px;
}

a.botondescarga div.flecha span.bottom,
div.flecha span.bottomShadow {
    position: absolute;
    width: 0px;
    height: 0px;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid black;
    top: 9px;
    left: -2px;
    z-index: 2;
}

a.botondescarga div.flecha span.bottomShadow {
    z-index: 1;
    left: -1px;
}

/* GRIS
   ================================================== */

a.gris {
    background-color: #888;
    background-image: -webkit-linear-gradient(top, #888, #333);
    background-image: -moz-linear-gradient(top, #888, #333);
    background-image: -ms-linear-gradient(top, #888, #333);
    background-image: -o-linear-gradient(top, #888, #333);
    background-image: linear-gradient(top, #888, #333);
    text-shadow: 1px 1px 1px rgba(255,255,255,.2);
    border-top: 1px solid #aaa;
}

a.gris span.bar {
    -webkit-box-shadow: 1px 1px 1px rgba(255,255,255,.2);
    -moz-box-shadow: 1px 1px 1px rgba(255,255,255,.2);
    box-shadow: 1px 1px 1px rgba(255,255,255,.2);
}

a.gris div.flecha span.top {
    -webkit-box-shadow: 1px 1px 1px rgba(255,255,255,.2);
    -moz-box-shadow: 1px 1px 1px rgba(255,255,255,.2);
    box-shadow: 1px 1px 1px rgba(255,255,255,.2);
}

a.gris div.flecha span.bottomShadow { border-top: 8px solid rgba(255, 255, 255, 0.2) }

/* AZUL
   ================================================== */

a.azul {
    background-color: #00aeef;
    background-image: -webkit-linear-gradient(top, #00aeef, #00587a);
    background-image: -moz-linear-gradient(top, #00aeef, #00587a);
    background-image: -ms-linear-gradient(top, #00aeef, #00587a);
    background-image: -o-linear-gradient(top, #00aeef, #00587a);
    background-image: linear-gradient(top, #00aeef, #00587a);
    text-shadow: 1px 1px 1px #23aaff;
    border-top: 1px solid #23ccff;
}

a.azul span.bar {
    -webkit-box-shadow: 1px 1px 1px #23aaff;
    -moz-box-shadow: 1px 1px 1px #23aaff;
    box-shadow: 1px 1px 1px #23aaff;
}

a.azul div.flecha span.top {
    -webkit-box-shadow: 1px 1px 1px #23aaff;
    -moz-box-shadow: 1px 1px 1px #23aaff;
    box-shadow: 1px 1px 1px #23aaff;
}

a.azul div.flecha span.bottomShadow { border-top: 8px solid #23aaff }

/* VERDE
   ================================================== */

a.verde {
    background-color: #68c800;
    background-image: -webkit-linear-gradient(top, #68c800, #367100);
    background-image: -moz-linear-gradient(top, #68c800, #367100);
    background-image: -ms-linear-gradient(top, #68c800, #367100);
    background-image: -o-linear-gradient(top, #68c800, #367100);
    background-image: linear-gradient(top, #68c800, #367100);
    text-shadow: 1px 1px 1px #67c800;
    border-top: 1px solid #67e800;
}

a.verde span.bar {
    -webkit-box-shadow: 1px 1px 1px #67c800;
    -moz-box-shadow: 1px 1px 1px #67c800;
    box-shadow: 1px 1px 1px #67c800;
}

a.verde div.flecha span.top {
    -webkit-box-shadow: 1px 1px 1px #67c800;
    -moz-box-shadow: 1px 1px 1px #67c800;
    box-shadow: 1px 1px 1px #67c800;
}

a.verde div.flecha span.bottomShadow { border-top: 8px solid #67c800 }

/* ROJO
   ================================================== */

a.rojo {
    background-color: #ee5f5b;
    background-image: -webkit-linear-gradient(top, #ee5f5b, #973431);
    background-image: -moz-linear-gradient(top, #ee5f5b, #973431);
    background-image: -ms-linear-gradient(top, #ee5f5b, #973431);
    background-image: -o-linear-gradient(top, #ee5f5b, #973431);
    background-image: linear-gradient(top, #ee5f5b, #973431);
    text-shadow: 1px 1px 1px #ed5d69;
    border-top: 1px solid #ed8d69;
}

a.rojo span.bar {
    -webkit-box-shadow: 1px 1px 1px #ed5d69;
    -moz-box-shadow: 1px 1px 1px #ed5d69;
    box-shadow: 1px 1px 1px #ed5d69;
}

a.rojo div.flecha span.top {
    -webkit-box-shadow: 1px 1px 1px #ed5d69;
    -moz-box-shadow: 1px 1px 1px #ed5d69;
    box-shadow: 1px 1px 1px #ed5d69;
}

a.rojo div.flecha span.bottomShadow { border-top: 8px solid #ed5d69 }

/* NARANJA
   ================================================== */

a.naranja {
    background-color: #ff8636;
    background-image: -webkit-linear-gradient(top, #ff8636, #9a3e00);
    background-image: -moz-linear-gradient(top, #ff8636, #9a3e00);
    background-image: -ms-linear-gradient(top, #ff8636, #9a3e00);
    background-image: -o-linear-gradient(top, #ff8636, #9a3e00);
    background-image: linear-gradient(top, #ff8636, #9a3e00);
    text-shadow: 1px 1px 1px #ff7f42;
    border-top: 1px solid #ffa542;
}

a.naranja span.bar {
    -webkit-box-shadow: 1px 1px 1px #ff7f42;
    -moz-box-shadow: 1px 1px 1px #ff7f42;
    box-shadow: 1px 1px 1px #ff7f42;
}

a.naranja div.flecha span.top {
    -webkit-box-shadow: 1px 1px 1px #ff7f42;
    -moz-box-shadow: 1px 1px 1px #ff7f42;
    box-shadow: 1px 1px 1px #ff7f42;
}

a.naranja div.flecha span.bottomShadow { border-top: 8px solid #ff7f42 }

/* AMARILLO
   ================================================== */

a.amarillo {
    background-color: #fcd116;
    background-image: -webkit-linear-gradient(top, #fcd116, #705b00);
    background-image: -moz-linear-gradient(top, #fcd116, #705b00);
    background-image: -ms-linear-gradient(top, #fcd116, #705b00);
    background-image: -o-linear-gradient(top, #fcd116, #705b00);
    background-image: linear-gradient(top, #fcd116, #705b00);
    text-shadow: 1px 1px 1px #ffc33d;
    border-top: 1px solid #ffff3d;
}

a.amarillo span.bar {
    -webkit-box-shadow: 1px 1px 1px #ffc33d;
    -moz-box-shadow: 1px 1px 1px #ffc33d;
    box-shadow: 1px 1px 1px #ffc33d;
}

a.amarillo div.flecha span.top {
    -webkit-box-shadow: 1px 1px 1px #ffc33d;
    -moz-box-shadow: 1px 1px 1px #ffc33d;
    box-shadow: 1px 1px 1px #ffc33d;
}

a.amarillo div.flecha span.bottomShadow { border-top: 8px solid #ffc33d }
</style>

Una vez tengas hecho esto, ya solo te queda añadir el codigo para mostrar el boton. Eliges el color que desees y pegas el codigo correspondiente. Donde pone URL agregas la direccion que enlazara la descarga. Sustituye la palabra TEXTO por lo que quieras escribir, por ejemplo 'Descargar imagen'.