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.

boton gris

boton azul

boton verde

boton rojo

boton naranja

boton amarillo

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

ver codigo

<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'.

ver codigo

<a href="URL" target="_blank" class="botondescarga gris"><div class="flecha">
<span class="top"></span><span class="bottom"></span><span class="bottomShadow"></span></div>
<span class="bar"></span>TEXTO</a> 



<a href="URL" target="_blank"class="botondescarga azul"><div class="flecha">
<span class="top"></span><span class="bottom"></span><span class="bottomShadow"></span></div>
<span class="bar"></span>TEXTO</a>



 <a href="URL" target="_blank" class="botondescarga verde"><div class="flecha">
<span class="top"></span><span class="bottom"></span><span class="bottomShadow"></span></div>
<span class="bar"></span>TEXTO</a> 



<a href="URL" target="_blank" class="botondescarga rojo"><div class="flecha">
<span class="top"></span><span class="bottom"></span><span class="bottomShadow"></span></div>
<span class="bar"></span>TEXTO</a>



 <a href="URL" target="_blank" class="botondescarga naranja"><div class="flecha">
<span class="top"></span><span class="bottom"></span><span class="bottomShadow"></span></div>
<span class="bar"></span>TEXTO</a> 



<a href="URL" target="_blank" class="botondescarga amarillo"><div class="flecha">
<span class="top"></span><span class="bottom"></span><span class="bottomShadow"></span></div>
<span class="bar"></span>TEXTO</a>

leer articulo ➨

Botones flash editables

Existen algunos sitios para realizar botones online, como la conocida web FlashVortex. Lo que pasa es que estos servicios, al ser gratuitos incluyen un texto con un enlace que esteticamente no queda muy bien. Ademas, una vez los tenemos no podemos modificarlos, se quedan estaticamente igual que los realizamos. No es el caso de estos 5 botones que aqui os presento, estos podemos ponerlos tantas veces como queramos cambiandoles el texto y los links. Como podeis apreciar, tienen un buen diseño, son elegantes y con buenos efectos hover al pasar el cursor.

Si quieres ponerlos en tu blog o web, elige el o los botones que te gusten, copia el codigo correspondiente y pegalo donde quieras mostrarlo. Modifica lo que esta escrito en color rojo, indicando el texto y la direccion url a la que enlazara. Para cambiar el tamaño del boton, hazlo modificando los numeros en color azul.

<object type="application/x-shockwave-flash" height="50" width="200" data="https://sites.google.com/site/redeando1/botonflash5.swf"><param name="movie" value="https://sites.google.com/site/redeando1/botonflash5.swf" /><param name="wmode" value="transparent" /><param name="flashvars"value="&in_title=TEXTO&&url=http://direccion&"/></object>

<object type="application/x-shockwave-flash" height="66" width="200" data="https://sites.google.com/site/redeando1/botonflash4.swf"><param name="movie" value="https://sites.google.com/site/redeando1/botonflash4.swf" /><param name="wmode" value="transparent" /><param name="flashvars"value="&in_title=TEXTO&&url=http://direccion&"/></object>

<object type="application/x-shockwave-flash" height="66" width="200" data="https://sites.google.com/site/redeando1/botonflash1.swf"><param name="movie" value="https://sites.google.com/site/redeando1/botonflash1.swf" /><param name="wmode" value="transparent" /><param name="flashvars"value="&in_title=TEXTO&&url=http://direccion&"/></object>

<object type="application/x-shockwave-flash" height="66" width="200" data="https://sites.google.com/site/redeando1/botonflash3.swf"><param name="movie" value="https://sites.google.com/site/redeando1/botonflash3.swf" /><param name="wmode" value="transparent" /><param name="flashvars"value="&in_title=TEXTO&&url=http://direccion&"/></object>

<object type="application/x-shockwave-flash" height="66" width="200" data="https://sites.google.com/site/redeando1/botonflash2.swf"><param name="movie" value="https://sites.google.com/site/redeando1/botonflash2.swf" /><param name="wmode" value="transparent" /><param name="flashvars"value="&in_title=TEXTO&&url=http://direccion&"/></object>

leer articulo ➨

Boton jQuery con tooltip animado

Como ya os explique en otro articulo, los tooltips, siempre le dan un toque de animacion a nuestros enlaces, produciendo un agradable efecto visual. Se pueden realizar con CSS3, pero en este caso he utilizado JavaScript (jQuery) con un codigo muy ligero (364 bytes) y 2 imagenes png transparente. Todo esto se lo he aplicado para realizar estos botones azules, que al pasar el cursor sobre ellos, te da la informacion tooltip con animacion y un fondo tipo 'bocadillo' de color amarillo gradiente. Se pueden utilizar individualmente o incluso añadir varios de ellos y asi formar tambien un menu.

BOTON UNO BOTON DOS BOTON TRES

Si quieres ponerlo en tu blog o web, primero tienes que ir a la plantilla y pegar el siguiente codigo jQuery/CSS entre las etiquetas <head> y guardar los cambios.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

 $(".botonesjquery a").append("<em></em>");

 $(".botonesjquery a").hover(function() {
  $(this).find("em").animate({opacity: "show", top: "-75"}, "slow");
  var hoverText = $(this).attr("title");
     $(this).find("em").text(hoverText);
 }, function() {
  $(this).find("em").animate({opacity: "hide", top: "-85"}, "fast");
 });


});
</script>

<style type="text/css">
.botonesjquery {
 margin: 10px 0 0;
 padding: 0;
 list-style: none;
}
.botonesjquery li {
 padding: 0;
 margin: 0 2px;
 float: left;
 position: relative;
 text-align: center;
}
.botonesjquery a {
 padding: 14px 10px;
 display: block;
 color: #000000 !important;
 width: 144px;
 text-decoration: none;
 font-weight: bold;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxf-83bxch6_YFjb0wHUMowWX8-ZqZzUPbAFEKtnlSBY5PE3WcQTadSdp_5vlNQUyWaGLF7WT5F2pFkYeYUWQXnkswgamnwc5ufnlszItHcRnZf0kGcaJ8J8m7DkcWCdUXuu2mdN7zZEU/s164/boton%2520jquery%2520-%2520REDEANDO.gif) no-repeat center center;
}
.botonesjquery li em {
 font-weight: normal;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih7aNJCBQboEUzsO2TRhMyV3z5PmEwAxvmBrpdh8PxiC1l_B8wAdOfmo7odujrQxVdPSHLfDUbCt9QVk9BF-TOsuF_Nl38bnwlo5vHbwdnVJGe9wLckDECZFa3yRnVTpYQEZScOZtMaJk/s200/boton%2520jquery%2520hover%2520-%2520REDEANDO.png) no-repeat;
 width: 180px;
 height: 45px;
 position: absolute;
 top: -85px;
 left: -15px;
 text-align: center;
 padding: 20px 12px 10px;
 font-style: normal;
 z-index: 2;
 display: none;
}
</style>

Ahora, cada vez que quieras poner uno de estos botones, tan solo tienes que añadir este codigo alli donde quieras mostrarlo. Cambia lo que esta en color naranja por el enlace, el texto del tooltip y el texto del boton que tu quieras.

<ul class="botonesjquery"><li><a href="URL ENLACE" title="TEXTO TOOLTIP">TEXTO BOTON</a></li></ul>

leer articulo ➨

Boton "Ir Azul"

En este tutorial te enseñare cómo crear este boton con pseudo-elementos, con una sola etiqueta class y el gran poder del CSS. Se trata de un boton que lleva incorporada una imagen png de una flechita (de ahi lo del nombre de "Ir) que al presionarlo se 'hunde' dando un efecto visual muy bueno. Lo puedes utilizar para cualquier cosa en tu blog o web y ademas es muy facil de realizar.

ejemplo de como te quedara

Para añadirlo a nuestro blog o web, lo primero es poner el codigo con los estilos CSS en nuestra plantilla y guardar los cambios. En Blogger los pondremos antes de ]]></b:skin> quitando la etiqueta <style> del principio y del final.

<style>

/* boton Ir Azul
----------------------------------------------- */
.botonirazul {
    background-color: #3BB3E0;
    background-image: -moz-linear-gradient(center bottom , #2CA0CA 0%, #3EB8E5 100%);
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 1px 0 #2AB7EC inset, 0 5px 0 0 #156785, 0 10px 5px #999999;
    color: #FFFFFF !important;
    font-family: 'Open Sans',sans-serif;
    font-size: 16px;
    padding: 10px 50px 10px 20px;
    position: relative;
    text-decoration: none;
}
.botonirazul:active {
    background-image: -moz-linear-gradient(center bottom , #3EB8E5 0%, #2CA0CA 100%);
    box-shadow: 0 1px 0 #2AB7EC inset, 0 2px 0 0 #156785, 0 5px 3px #999999;
    top: 3px;
}
.botonirazul:before {
    background-color: #2591B4;
    background-image: url("http://hostredeando.ucoz.es/imagenes1/imagenes-b/right_arrow.png");
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 50% 50% 50% 50%;
    box-shadow: 0 1px 0 #052756 inset, 0 1px 0 #60C9F0;
    content: "";
    height: 20px;
    margin-top: -9px;
    position: absolute;
    right: 15px;
    top: 50%;
    width: 20px;
}
.botonirazul:active:before {
    box-shadow: 0 1px 0 #60C9F0 inset, 0 3px 0 #0E3871, 0 6px 3px #1A80A6;
    margin-top: -12px;
    top: 50%;
}
</style>

Ahora solo queda añadir este codigo cada vez que quieras mostrar el boton, sustituyendo lo que esta en rojo por la url y el texto que quieras poner.

<a class="botonirazul" href="URL"><b>TEXTO</b></a>

leer articulo ➨

Boton "Descargar" con animacion

Las maravillas que se pueden hacer hoy en dia con CSS3 son muchas y muy variadas. Como este boton ideal para poner descargas con una fantastica animacion. Y como dicen que para muestra un boton, aqui debajo lo tienes para que veas como queda. Pulsa sobre el y pruebalo.

Descargar

Para ponerlo en tu blog o web, primero tienes que añadir los estilos CSS en tu plantilla y guardar.

<style>
.bdescargar {
    -moz-transition: all 0.5s ease-in-out 0s;
    background-color: #F4F5FE;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 0 7px rgba(0, 0, 0, 0.4) inset, 0 0 0 4px rgba(255, 255, 255, 0.1);
    display: block;
    margin: 10px;
    overflow: hidden;
    padding: 10px 15px;
    position: relative;
    text-decoration: none;
    width: 160px;
}
.bdescargar .icon {
    -moz-transition: all 0.5s ease-in-out 0s;
    background: url("http://uploads.boxify.me/60797/download.png") no-repeat scroll left top transparent;
    float: left;
    height: 32px;
    width: 45px;
}
.bdescargar .title {
    color: #000000;
    display: block;
    float: left;
    font-size: 18px;
    font-weight: bold;
    line-height: 32px;
}
.bdescargar .icon2 {
    background: url("http://uploads.boxify.me/60798/download2.png") no-repeat scroll left top transparent;
    height: 32px;
    left: 20px;
    opacity: 0;
    position: absolute;
    top: -15px;
    width: 32px;
}
.bdescargar:hover {
    -moz-transition-delay: 0.5s;
    background-color: #E3E3FF;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.5) inset, 0 0 0 4px rgba(51, 51, 204, 0.5);
}
.bdescargar:hover .icon {
    -moz-transform: rotate(-90deg) scale(0.8);
}
.bdescargar:active .icon {
    opacity: 0;
}
.bdescargar:active .icon2 {
    -moz-animation: 1s linear 0s normal none infinite slideDown1;
    opacity: 1;
}
.bdescargar:active {
    background-color: #C1C1FF;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) inset, 0 0 0 4px rgba(51, 51, 204, 0.8);
}
@keyframes slideDown1{
    0% {
        top: -30px;
    }
    100% {
        top: 55px;
    }
}
@-webkit-keyframes slideDown1{
    0% {
        top: -30px;
    }
    100% {
        top: 55px;
    }
}
@-moz-keyframes slideDown1{
    0% {
        top: -30px;
    }
    100% {
        top: 55px;
    }
}
</style>

Ahora, cada vez que queramos mostrar el boton, añadimos este codigo, poniendo la url de la descarga donde esta indicado en rojo.

<a class="bdescargar" href="URL"><span class="icon"></span><span class="title">Descargar</span><span class="icon2"></span></a>

leer articulo ➨

Boton verde gradient

Si quieres añadir uno, dos o mas botones en tu web y te gusta el color verde, este de aqui te gustara. Esta hecho totalmente con CSS en tono verde difuminado con efecto 'hover' en el mismo color. Lo primero que hay que hacer es añadir los estilos en el <body> de nuestra plantilla. Podemos cambiar el tamaño del texto y a su vez del boton, modificando el numero que esta en rojo.

<style type='text/css'> .bverdegradient {    border-top: 1px solid #adadad;    background: #4dd417;    background: -webkit-gradient(linear, left top, left bottom, from(#133466), to(#4dd417));    background: -moz-linear-gradient(top, #133466, #4dd417);    padding: 7px 14px;    -webkit-border-radius: 15px;    -moz-border-radius: 15px;    border-radius: 15px;    -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;    -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;    box-shadow: rgba(0,0,0,1) 0 1px 0;    text-shadow: rgba(0,0,0,.4) 0 1px 0;    color: white !important;    font-size: 30px;    font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;    text-decoration: none;    vertical-align: middle;    } .bverdegradient:hover {    border-top-color: #11a800;    background: #11a800;    color: #ffffff;    } .bverdegradient:active {    border-top-color: #1b435e;    background: #1b435e;    } </style>

Ahora, ya solo queda mostrarlo. Cada vez que quieras añadir un boton, pegas este codigo:

<a class="bverdegradient" href="URL ENLACE">TEXTO</a>

ejemplo del boton

leer articulo ➨

Boton "Skip"

Un boton azul muy elegante con estilo 'glossy' horizontal que puedes utilizar para enlazar multitud de cosas en tu blog o web. Esta creado solo con CSS, no contiene ninguna imagen. Para añadirlo, lo primero es poner los estilos CSS en el <body> de la plantilla.

<style>
button.skip {
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #8C9CBF;
    background-image: -moz-linear-gradient(center top , #8C9CBF 0%, #546A9E 50%, #36518F 50%, #3D5691 100%);
    border-color: #172D6E #172D6E #0E1D45;
    border-radius: 5px 5px 5px 5px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 0 0 #B1B9CB inset;
    color: #FFFFFF;
    font: bold 35px "helvetica neue",helvetica,arial,sans-serif;
    padding: 7px 0 8px;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 -1px 1px #000F4D;
    width: 200px;
}
button.skip:hover {
    background-color: #7F8DAD;
    background-image: -moz-linear-gradient(center top , #7F8DAD 0%, #4A5E8C 50%, #2F477D 50%, #364C80 100%);
    cursor: pointer;
}
button.skip:active {
    box-shadow: 0 0 20px 0 #1D2845 inset, 0 1px 0 white;
}
</style>

Y una vez hecho esto, solo queda añadir este codigo (modificando lo que esta en rojo) cada vez que quieras mostrar el boton:

<a href="ENLACE"><button class="skip">TEXTO</button></a>

Y este sera el resultado:

leer articulo ➨

Botón con Rollover

---

Para este ejemplo debemos tener 3 imágenes, las cuales funcionarán como:

Aqui estan los estilos CSS con la url de las 3 imagenes ya incluidas:

<style type="text/css" > #bot1 { border: 0 0 0 0; padding: 0; text-align: center; } #bot1 a{ background-image:url(http://www.ejemplode.com/images/uploads/bg_menu_1.jpg); height:30px; width:100px; background-position: center top; display: block; color: #990000; text-decoration: none; padding-top: 5px; background-repeat: no-repeat; font-weight: bold; } #bot1 a:hover{ background-image:url(http://www.ejemplode.com/images/uploads/bg_menu_2.jpg); } #bot1 a:focus{ background-image:url(http://www.ejemplode.com/images/uploads/bg_menu_3.jpg); } </style>

Ahora aqui esta el codigo para mostrar el boton:

<span id="bot1">     <a href="URL">TEXTO</a> </span>

Y asi nos quedara:

REDEANDO

leer articulo ➨

El boton 'onmouseover'

Si quieres crear botones para tu blog o web, el boton 'onmouseover' con imagenes te vendra de lujo. Como ya lo dice la palabreja en ingles, es un boton que cambia de imagen al pasar el raton. Basta añadir con un codigo javascript-css muy cortito y tener dos imagenes, si puede ser del mismo tamaño. Una imagen sera la estatica y la otra sera la que cambiara al pasar el cursor para clickear.

Primero nos diseñamos las 2 imagenes y las subimos:

 IMAGEN 1

IMAGEN 2

Ahora añadimos el siguiente codigo donde queramos poner el boton. Añadimos las imagenes en su lugar correspondiente (la imagen 1 estatica hay que ponerla 2 veces), añadimos la url y el tamaño de las imagenes donde esta en azul.

<center><a href="URL"><img alt="" src="IMAGEN1" onmouseout="javascript:this.src='IMAGEN1';" onmouseover="javascript:this.src='IMAGEN2';" style="padding: 0px 0px 0px; float: center;" height="ALTO" border="0" width="ANCHO"></a></center>

y asi nos quedara      nuestro boton

leer articulo ➨

Bombon boton

Vamos a crear unos botones con diseño de bombon (de ahi su mombre, claro) con efecto glossy muy atractivos para ponerlos en tu web. Ademas, los podemos hacer hasta de 5 colores diferentes. Aqui tienes un ejemplo de como quedan de llamativos.

azul

verde

rosa

gris

naranja

Primero, como siempre, añadimos los estilos CSS:

<br /> <br /> /* BonBon Buttons 1.1 by simurai.com<br /> <br /> 1.1 Added unprefixed attributes, :focus style, <button> support<br /> 1.0 Released<br /> <br /> Usage:<br /> <br /> Default button: <a href="" class="button">Label</a><br /> More fancy with icon: <a href="" class="button orange glossy" data-icon="★">Label</a><br /> <br /> Following additional class names are supported:<br /> <br /> Color: orange, pink, blue, green, transparent<br /> Font: serif<br /> Material: glossy, glass<br /> Size: xs, xl<br /> Shape: round, oval, brackets, skew, back, knife, shield, drop, morph<br /> Icon only: icon<br /> Disabled: disabled<br /> <br /> */<br /> <br /> <br /> @import url(http://fonts.googleapis.com/css?family=Droid+Sans:bold+Lobster);<br /> @import url(http://fonts.googleapis.com/css?family=Lobster);<br /> @import url(pictos/pictos.css);<br /> <br /> <br /> /* -------------- THE button -------------- */<br /> .button {<br /> <br /> /* text */<br /> text-decoration: none;<br /> font: 24px/1em 'Droid Sans', sans-serif;<br /> font-weight: bold;<br /> text-shadow: rgba(255,255,255,.5) 0 1px 0;<br /> -webkit-user-select: none;<br /> -moz-user-select: none;<br /> user-select: none;<br /> <br /> <br /> /* layout */<br /> padding: .5em .6em .4em .6em;<br /> margin: .5em;<br /> display: inline-block;<br /> position: relative;<br /> <br /> -webkit-border-radius: 8px;<br /> -moz-border-radius: 8px;<br /> border-radius: 8px;<br /> <br /> /* effects */<br /> border-top: 1px solid rgba(255,255,255,0.8);<br /> border-bottom: 1px solid rgba(0,0,0,0.1);<br /> <br /> background-image: -webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0.7) )), url(noise.png);<br /> background-image: -moz-radial-gradient(top, ellipse cover, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%), url(noise.png);<br /> background-image: gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0.7) )), url(noise.png);<br /> <br /> -webkit-transition: background .2s ease-in-out;<br /> -moz-transition: background .2s ease-in-out;<br /> transition: background .2s ease-in-out;<br /> <br /> /* color */<br /> color: hsl(0, 0%, 40%) !important;<br /> background-color: hsl(0, 0%, 75%);<br /> <br /> -webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ <br /> hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */<br /> rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */<br /> -moz-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ <br /> hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */<br /> rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */<br /> box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ <br /> hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */<br /> rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */<br /> }<br /> <br /> /* -------------- button (tag) -------------- */<br /> <br /> button.button {<br /> border-left: none;<br /> border-right: none;<br /> }<br /> button.button:hover {<br /> cursor: pointer;<br /> }<br /> <br /> <br /> /* -------------- icon -------------- */<br /> .button:before {<br /> font: 1.2em/0 'Pictos', sans-serif;<br /> content: attr(data-icon); /* gets the icon value from the custom data attribute and puts it infront of the button label */<br /> margin-right: 0.4em;<br /> <br /> <br /> }<br /> /* icon only */<br /> .icon {<br /> font-weight: normal;<br /> font-style: normal;<br /> text-indent: -999em;<br /> }<br /> .icon:before { <br /> margin-right: 0;<br /> display: block;<br /> height: 0;<br /> text-indent: 0px; <br /> }<br /> <br /> <br /> <br /> /* -------------- colours -------------- */<br /> <br /> .button.orange {<br /> color: hsl(39, 100%, 30%) !important;<br /> background-color: hsl(39, 100%, 50%);<br /> <br /> -webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ <br /> hsl(39, 100%, 40%) 0 .1em 3px, hsl(39, 100%, 30%) 0 .3em 1px, /* color border */<br /> rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */<br /> -moz-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ <br /> hsl(39, 100%, 40%) 0 .1em 3px, hsl(39, 100%, 30%) 0 .3em 1px, /* color border */<br /> rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */<br /> box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ <br /> hsl(39, 100%, 40%) 0 .1em 3px, hsl(39, 100%, 30%) 0 .3em 1px, /* color border */<br /> rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */<br /> }<br /> .button.orange:hover { background-color: hsl(39, 100%, 65%); }<br /> <br /> <br /> .button.blue {<br /> color: hsl(208, 50%, 40%) !important;<br /> background-color: hsl(208, 100%, 75%);<br /> <br /> -webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ <br /> hsl(208, 50%, 55%) 0 .1em 3px, hsl(208, 50%, 40%) 0 .3em 1px, /* color border */<br /> rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */<br /> -moz-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ <br /> hsl(208, 50%, 55%) 0 .1em 3px, hsl(208, 50%, 40%) 0 .3em 1px, /* color border */<br /> rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */<br /> box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ <br /> hsl(208, 50%, 55%) 0 .1em 3px, hsl(208, 50%, 40%) 0 .3em 1px, /* color border */<br /> rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */<br /> }<br /> .button.blue:hover { background-color: hsl(208, 100%, 83%); }<br /> <br /> .button.green {<br /> color: hsl(88, 70%, 30%) !important;<br /> background-color: hsl(88, 70%, 60%);<br /> -webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ <br /> hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, /* color border */<br /> rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */<br /> -moz-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ <br /> hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, /* color border */<br /> rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */<br /> box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ <br /> hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, /* color border */<br /> rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */<br /> }<br /> .button.green:hover { background-color: hsl(88, 70%, 75%); }<br /> <br /> .button.pink {<br /> color: hsl(340, 100%, 30%) !important;<br /> background-color: hsl(340, 100%, 75%);<br /> -webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ <br /> hsl(340, 70%, 50%) 0 .1em 3px, hsl(340, 80%, 40%) 0 .3em 1px, /* color border */<br /> rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */<br /> -moz-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ <br /> hsl(340, 70%, 50%) 0 .1em 3px, hsl(340, 80%, 40%) 0 .3em 1px, /* color border */<br /> rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */<br /> box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ <br /> hsl(340, 70%, 50%) 0 .1em 3px, hsl(340, 80%, 40%) 0 .3em 1px, /* color border */<br /> rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */<br /> }<br /> .button.pink:hover { background-color: hsl(340, 100%, 83%); }<br /> <br /> <br /> <br /> .button.transparent {<br /> color: rgba(0,0,0,0.5) !important;<br /> }<br /> .button.transparent, .button.transparent:hover, .button.transparent:active {<br /> background-color: transparent;<br /> background-image: none;<br /> }<br /> .button.transparent:hover {<br /> opacity: .9;<br /> }<br /> <br /> <br /> <br /> /* -------------- States -------------- */<br /> <br /> .button:hover {<br /> background-color: hsl(0, 0%, 83%);<br /> }<br /> <br /> <br /> <br /> .button:active {<br /> background-image: -webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(noise.png);<br /> background-image: -moz-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(noise.png);<br /> background-image: gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(noise.png);<br /> <br /> -webkit-box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */ <br /> rgba(0,0,0,0.4) 0 .1em 1px, /* border */<br /> rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */<br /> -moz-box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */ <br /> rgba(0,0,0,0.4) 0 .1em 1px, /* border */<br /> rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */<br /> box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */ <br /> rgba(0,0,0,0.4) 0 .1em 1px, /* border */<br /> rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */<br /> <br /> -webkit-transform: translateY(.2em);<br /> -moz-transform: translateY(.2em);<br /> transform: translateY(.2em);<br /> }<br /> <br /> .button:focus {<br /> outline: none;<br /> color: rgba(254,255,255,0.9) !important;<br /> text-shadow: rgba(0,0,0,0.2) 0 1px 2px;<br /> }<br /> <br /> .button[disabled], .button[disabled]:hover, .button.disabled, .button.disabled:hover {<br /> opacity: .5;<br /> cursor: default;<br /> color: rgba(0,0,0,0.2) !important;<br /> text-shadow: none !important;<br /> background-color: rgba(0,0,0,0.05);<br /> background-image: none;<br /> border-top: none;<br /> <br /> -webkit-box-shadow: inset rgba(255,254,255,0.4) 0 0.3em .3em, inset rgba(0,0,0,0.1) 0 -0.1em .3em, /* inner shadow */ <br /> rgba(0,0,0,0.3) 0 .1em 1px, /* border */<br /> rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */<br /> -moz-box-shadow: inset rgba(255,254,255,0.4) 0 0.3em .3em, inset rgba(0,0,0,0.1) 0 -0.1em .3em, /* inner shadow */ <br /> rgba(0,0,0,0.3) 0 .1em 1px, /* border */<br /> rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */<br /> box-shadow: inset rgba(255,254,255,0.4) 0 0.3em .3em, inset rgba(0,0,0,0.1) 0 -0.1em .3em, /* inner shadow */ <br /> rgba(0,0,0,0.3) 0 .1em 1px, /* border */<br /> rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */<br /> <br /> -webkit-transform: translateY(5px);<br /> -moz-transform: translateY(5px);<br /> transform: translateY(5px);<br /> }<br /> <br /> /* -------------- Fonts -------------- */<br /> <br /> .serif { <br /> font-family: 'Lobster', serif;<br /> font-weight: normal;<br /> }<br /> <br /> <br /> /* -------------- Sizes -------------- */<br /> <br /> .xs { font-size: 16px; }<br /> .xl { font-size: 32px; }<br /> <br /> <br /> /* -------------- Materials -------------- */<br /> <br /> .button.glossy:after, .button.glass:after {<br /> content: "";<br /> position: absolute; <br /> width: 90%;<br /> height: 60%;<br /> top: 0;<br /> left: 5%; <br /> <br /> -webkit-border-radius: .5em .5em 1em 1em / .5em .5em 2em 2em; <br /> -moz-border-radius: .5em .5em 1em 1em / .5em .5em 2em 2em;<br /> border-radius: .5em .5em 1em 1em / .5em .5em 2em 2em;<br /> <br /> background-image: -webkit-gradient(linear, 0% 0, 100% 0, from( rgba(255,255,255,.55) ), to( rgba(255,255,255,.5) ),<br /> color-stop(.5, rgba(255,255,255,0)), color-stop(.8, rgba(255,255,255,0)) ); <br /> background-image: -moz-linear-gradient(left, rgba(255,255,255,.55), rgba(255,255,255,0) 50%, rgba(255,255,255,0) 80%, rgba(255,255,255,.5) ); <br /> background-image: gradient(linear, 0% 0, 100% 0, from( rgba(255,255,255,.55) ), to( rgba(255,255,255,.5) ),<br /> color-stop(.5, rgba(255,255,255,0)), color-stop(.8, rgba(255,255,255,0)) ); <br /> }<br /> .button.glossy:active:after,<br /> .button.glass:active:after,<br /> .button.disabled:after,<br /> .button[disabled]:after<br /> { opacity: .6; }<br /> <br /> .button.icon.glossy:after,<br /> .button.icon.glass:after { height: 75% ; }<br /> <br /> /* -------------- Glass + Transparent -------------- */<br /> .button.glass {<br /> text-shadow: rgba(255,255,255,.5) 0 -1px 0, rgba(0,0,0,0.18) 0 .18em .15em;<br /> }<br /> .button.glass:active {<br /> text-shadow: rgba(255,255,255,.3) 0 1px 0, rgba(0,0,0,0.15) 0 .18em .15em;<br /> }<br /> <br /> <br /> /* -------------- Shapes -------------- */<br /> <br /> /* round */<br /> .round, .round.glossy:after, .round.glass:after { <br /> border-top: none; <br /> -webkit-border-radius: 1em; <br /> -moz-border-radius: 1em; <br /> border-radius: 1em; <br /> }<br /> <br /> /* oval */<br /> .oval {<br /> border-top: none; <br /> padding-left: .8em;<br /> padding-right: .8em;<br /> -webkit-border-radius: 5em / 2em; <br /> -moz-border-radius: 5em / 2em; <br /> border-radius: 5em / 2em; <br /> }<br /> .oval.glossy:after, .oval.glass:after { <br /> top: 5%;<br /> -webkit-border-radius: 5em / 2em 2em 1em 1em; <br /> -moz-border-radius: 5em / 2em 2em 1em 1em; <br /> border-radius: 5em / 2em 2em 1em 1em; <br /> }<br /> .oval.icon {<br /> padding-left: .8em;<br /> padding-right: .8em; <br /> -webkit-border-radius: 1.5em / 1em; <br /> -moz-border-radius: 1.5em / 1em; <br /> border-radius: 1.5em / 1em; <br /> }<br /> .oval.icon.glossy:after, .oval.icon.glass:after { <br /> -webkit-border-radius: 1.5em / 1em; <br /> -moz-border-radius: 1.5em / 1em; <br /> border-radius: 1.5em / 1em; <br /> }<br /> <br /> /* brackets */<br /> .brackets, .brackets.glossy:after, .brackets.glass:after { <br /> border-top: none; <br /> -webkit-border-radius: .5em / 1em;<br /> -moz-border-radius: .5em / 1em;<br /> border-radius: .5em / 1em;<br /> }<br /> <br /> /* skew */<br /> .skew { <br /> border-top: none; <br /> padding-right: 1.2em;<br /> padding-left: 0.8em; <br /> -webkit-border-radius: 5em 1em / 5em 1em; <br /> -moz-border-radius: 5em 1em / 5em 1em; <br /> border-radius: 5em 1em / 5em 1em; <br /> }<br /> .skew.glossy:after, .skew.glass:after { <br /> left: 10%;<br /> -webkit-border-radius: 7em 1em / 5em 1em;<br /> -moz-border-radius: 7em 1em / 5em 1em;<br /> border-radius: 7em 1em / 5em 1em;<br /> }<br /> .skew.icon { <br /> padding-right: .9em;<br /> padding-left: .8em;<br /> }<br /> <br /> /* back */<br /> .back, .back.glossy:after, .back.glass:after { <br /> border-top-color: rgba(255,255,255,0.5);<br /> -webkit-border-radius: 1.6em 1.6em 1em 1em / 4em 4em 1em 1em; <br /> -moz-border-radius: 1.6em 1.6em 1em 1em / 4em 4em 1em 1em; <br /> border-radius: 1.6em 1.6em 1em 1em / 4em 4em 1em 1em; <br /> }<br /> .back.glossy:after, .back.glass:after { <br /> left: 6%;<br /> width: 88%;<br /> }<br /> <br /> /* knife */<br /> .knife { <br /> padding-left: 1.5em;<br /> -webkit-border-radius: .2em .5em .5em 8em / .2em .5em .5em 5em; <br /> -moz-border-radius: .2em .5em .5em 8em / .2em .5em .5em 5em; <br /> border-radius: .2em .5em .5em 8em / .2em .5em .5em 5em; <br /> }<br /> .knife.glossy:after, .knife.glass:after {<br /> left: 3%;<br /> width: 97%; <br /> -webkit-border-radius: .1em .5em .5em 8em / .1em .5em .5em 2em; <br /> -moz-border-radius: .1em .5em .5em 8em / .1em .5em .5em 2em; <br /> border-radius: .1em .5em .5em 8em / .1em .5em .5em 2em; <br /> }<br /> .knife.glossy.icon:after, .knife.glass.icon:after { <br /> left: 5%; <br /> width: 95%;<br /> -webkit-border-radius: .5em .5em 1em 6em / .5em .5em 1em 4em; <br /> -moz-border-radius: .5em .5em 1em 6em / .5em .5em 1em 4em; <br /> border-radius: .5em .5em 1em 6em / .5em .5em 1em 4em; <br /> }<br /> <br /> /* shield */<br /> .shield, .shield.glossy:after, .shield.glass:after { <br /> -webkit-border-radius: .4em .4em 2em 2em / .4em .4em 3em 3em; <br /> -moz-border-radius: .4em .4em 2em 2em / .4em .4em 3em 3em;<br /> border-radius: .4em .4em 2em 2em / .4em .4em 3em 3em;<br /> }<br /> .shield { <br /> padding-left: .8em;<br /> padding-right: .8em;<br /> }<br /> .shield.icon { <br /> padding-left: .6em; <br /> padding-right: .6em;<br /> }<br /> <br /> /* drop */<br /> .drop {<br /> border-top: none;<br /> -webkit-border-radius: 2em 5em 2em .6em / 2em 4em 2em .6em; <br /> -moz-border-radius: 2em 5em 2em .6em / 2em 4em 2em .6em; <br /> border-radius: 2em 5em 2em .6em / 2em 4em 2em .6em; <br /> }<br /> .drop.glossy:after, .drop.glass:after { <br /> left: 4%;<br /> -webkit-border-radius: 2em 6em 2em 1em / 2em 4em 2em 2em; <br /> -moz-border-radius: 2em 6em 2em 1em / 2em 4em 2em 2em;<br /> border-radius: 2em 6em 2em 1em / 2em 4em 2em 2em;<br /> }<br /> .drop.icon { <br /> padding-right: .6em; <br /> }<br /> <br /> <br /> /* morph */<br /> .morph {<br /> border-top: none;<br /> -webkit-border-radius: 5em / 2em;<br /> -moz-border-radius: 5em / 2em;<br /> border-radius: 5em / 2em;<br /> -webkit-transition: -webkit-border-radius .3s ease-in-out;<br /> -moz-transition: -moz-border-radius .3s ease-in-out;<br /> transition: -moz-border-radius .3s ease-in-out;<br /> }<br /> .morph:hover { <br /> -webkit-border-radius: .4em .4em 2em 2em / .4em .4em 3em 3em;<br /> -moz-border-radius: .4em .4em 2em 2em / .4em .4em 3em 3em;<br /> border-radius: .4em .4em 2em 2em / .4em .4em 3em 3em;<br /> }<br /> .morph:active { <br /> -webkit-border-radius: .3em;<br /> -moz-border-radius: .3em;<br /> border-radius: .3em;<br /> }<br /> .morph:after { <br /> display: none;<br /> }<br /> <br /> <br /> <br /> <br /> /* Some ugly hacks for FF. <br /> Thanks to David Hund for some help - http://valuedstandards.com/static/test/buttons/ */<br /> @-moz-document url-prefix() {<br /> .button { text-align: center; }<br /> .icon { padding: .5em 1em; }<br /> .icon:before { margin-left: -.42em; float: left; }<br /> <br /> .drop.icon { padding-right: 1.1em; }<br /> .shield.icon { padding-left: 1.1em; padding-right: 1.1em; }<br /> .skew.icon { padding-right: 1.4em; padding-left: 1.3em; }<br /> .oval.icon { padding-left: 1.3em; padding-right: 1.3em; }<br /> .knife { padding-left: 2em; }<br /> }<br /> <br /> <br /> <br /> <br /> /* Damn, this became a fat baby.. */<br /> <br /> <br />

Ahora, para mostrar los botones pegamos el codigo div alli donde queramos que se vean:

<a href="URL" class="button orange glossy">TEXTO</a>

Para cambiar el color, tenemos que sustituir donde pone "button orange glossy", por el color que elijamos (eso si, en ingles), por ejemplo blue, pink, green. Si lo queremos dejar gris, no ponemos ningun color.

leer articulo ➨