Botones estilo T! - Degradado en CSS3


Botones estilo Taringa


Revisando entre mis cosas encontre unos documentos en html, su contenido eran estos botones, hace tiempo los desarrolle con un estilo similar al de los botones que usa Taringa, estos son compatibles con todos los navegadores que permitan degradado, y los que no mostrara solo un color solido, es muy sencillo tenerlo, quizas les sea de utilidad y mas aun si usan la utlma version de la plantilla para blogger Taringa que comparti en la entrada anterior

Copiamos el siguiente código y lo pondremos en donde tengamos los estilos de nuestra web, en blogger nos dirigiremos a Edición html y lo pegaremos arriba de  ]]></b:skin>

/*botones blanco, rojo, verde y azul*/

/*General*/

.boton-text-all-color {
    display: block;
    font-family: Arial,Helvetica;
    font-size: 12px;
    font-weight: bold;
    line-height: 1.4;
}

.boton-centro {
    cursor: pointer;
    display: inline-block;
    margin-right: 0.1em;
    overflow: visible;
    padding: 5px 10px;
    position: relative;
    text-align: center;
    text-decoration: none !important;
    border-radius: 4px 4px 4px 4px;
}


/*Boton Azul*/
.boton-azul {
    background: #377ad0;
    background-image: linear-gradient(bottom, #3779D0 0%, #52A7E8 100%);
    background-image: -o-linear-gradient(bottom, #3779D0 0%, #52A7E8 100%);
    background-image: -moz-linear-gradient(bottom, #3779D0 0%, #52A7E8 100%);
    background-image: -webkit-linear-gradient(bottom, #3779D0 0%, #52A7E8 100%);
    background-image: -ms-linear-gradient(bottom, #3779D0 0%, #52A7E8 100%);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #3779D0),color-stop(1, #52A7E8));
    background-clip: padding-box!important;
    border-top: 1px solid #4081af!important;
    border-right: 1px solid #2e69a3!important;
    border-bottom: 1px solid #20559a!important;
    border-left: 1px solid #2e69a3!important;
    border-radius: 5px!important;
    box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3!important;
    color: #fff!important;
    font-size: 12px!important;
    font-weight: bold!important;
    line-height: 1!important;
    padding: 5px 10px!important;
    text-align: center!important;
    text-shadow: 0 -1px 1px #3275bc!important;
   
}

.boton-azul:hover {
    background: #206bcb;
    background-image: linear-gradient(bottom, #206ACB 0%, #3E9DE5 100%);
    background-image: -o-linear-gradient(bottom, #206ACB 0%, #3E9DE5 100%);
    background-image: -moz-linear-gradient(bottom, #206ACB 0%, #3E9DE5 100%);
    background-image: -webkit-linear-gradient(bottom, #206ACB 0%, #3E9DE5 100%);
    background-image: -ms-linear-gradient(bottom, #206ACB 0%, #3E9DE5 100%);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #206ACB),color-stop(1, #3E9DE5));
    background-clip: padding-box!important;
    border-top: 1px solid #2a73a6!important;
    border-right: 1px solid #165899!important;
    border-bottom: 1px solid #07428f!important;
    border-left: 1px solid #165899!important;
    box-shadow: inset 0 1px 0 0 #62b1e9!important;
    cursor: pointer!important;
    text-shadow: 0 -1px 1px #1d62ab!important;
    color: #FFF!important;
}

.boton-azul:active {
    background: #3282d3!important;
    background-clip: padding-box!important;
    border: 1px solid #154c8c!important;
    border-bottom: 1px solid #0e408e!important;
    box-shadow: inset 0 0 6px 3px #1657b5, 0 1px 0 0 #fff!important;
    text-shadow: 0 -1px 1px #2361a4!important;
    color: #FFF!important; 
}

/*Boton verde*/

.boton-verde {
    background: #65d43b;
    background-image: linear-gradient(bottom, #5DD037 0%, #89E64F 100%);
    background-image: -o-linear-gradient(bottom, #5DD037 0%, #89E64F 100%);
    background-image: -moz-linear-gradient(bottom, #5DD037 0%, #89E64F 100%);
    background-image: -webkit-linear-gradient(bottom, #5DD037 0%, #89E64F 100%);
    background-image: -ms-linear-gradient(bottom, #5DD037 0%, #89E64F 100%);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #5DD037),color-stop(1, #89E64F));
    background-clip: padding-box;
    border-top: 1px solid #6caf40;
    border-right: 1px solid #53a32e;
    border-bottom: 1px solid #3e9a20;
    border-left: 1px solid #53a32e;
    border-radius: 5px;
    border-radius: 5px;
    box-shadow: inset 0 1px 0 0 #a3eb72, 0 1px 2px 0 #b3b3b3;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
    padding: 5px 10px;
    text-align: center;
    text-shadow: 0 -1px 1px #6acb3c;
}


.boton-verde:hover {
    background: #45b31d;
    background-image: linear-gradient(bottom, #45B31D 0%, #79DA40 100%);
    background-image: -o-linear-gradient(bottom, #45B31D 0%, #79DA40 100%);
    background-image: -moz-linear-gradient(bottom, #45B31D 0%, #79DA40 100%);
    background-image: -webkit-linear-gradient(bottom, #45B31D 0%, #79DA40 100%);
    background-image: -ms-linear-gradient(bottom, #45B31D 0%, #79DA40 100%);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #45B31D),color-stop(1, #79DA40));
    background-clip: padding-box;
    border-top: 1px solid #59a62a;
    border-right: 1px solid #59a62a;
    border-bottom: 1px solid #438918;
    border-left: 1px solid #59a62a;
    box-shadow: inset 0 1px 0 0 #a3eb72;
    cursor: pointer;
    text-shadow: 0 -1px 1px #6acb3c;
    color: #FFF;
}

.boton-verde:active {
    background: #32d335!important;
    border: 1px solid #0e8e1e!important;
    border-bottom: 1px solid #0e408e!important;
    box-shadow: inset 0 0 6px 3px #1ab928, 0 1px 0 0 #fff!important;
    text-shadow: 0 -1px 1px #26ad2b!important;
    background-clip: padding-box!important;
    color: #FFF!important; 
}

/*Boton blanco*/

.boton-blanco {
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid;
    radius: 4px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 12px;
    font-family: Arial,Helvetica;
    cursor: pointer;
    box-shadow:0 1px 0 0 #DDDDDD;
}

.boton-blanco {
    border-color: #cccccc #c6c6c6 #aaaaaa;
    color: #111111;
    text-shadow: 0 1px 0 #EEEEEE;
    background-image: linear-gradient(bottom, #EEEEEE 0%, #FCFCFC 100%);
    background-image: -o-linear-gradient(bottom, #EEEEEE 0%, #FCFCFC 100%);
    background-image: -moz-linear-gradient(bottom, #EEEEEE 0%, #FCFCFC 100%);
    background-image: -webkit-linear-gradient(bottom, #EEEEEE 0%, #FCFCFC 100%);
    background-image: -ms-linear-gradient(bottom, #EEEEEE 0%, #FCFCFC 100%);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #EEEEEE),color-stop(1, #FCFCFC));
}

.boton-blanco:hover {
    background-color: #DDDDDD;
    background: #ffffff;
    background-image: linear-gradient(bottom, #DDDDDD 0%, #FFFFFF 100%);
    background-image: -o-linear-gradient(bottom, #DDDDDD 0%, #FFFFFF 100%);
    background-image: -moz-linear-gradient(bottom, #DDDDDD 0%, #FFFFFF 100%);
    background-image: -webkit-linear-gradient(bottom, #DDDDDD 0%, #FFFFFF 100%);
    background-image: -ms-linear-gradient(bottom, #DDDDDD 0%, #FFFFFF 100%);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #DDDDDD),color-stop(1, #FFFFFF));
}

.boton-blanco:active {
    background: none repeat scroll 0 0 #eceaea;
    border-color: #a9a9a9 #adacac #b2b0b0;
    border-style: solid;
    border-width: 1px;
}

.boton-blanco-text {
    display: block;
}

.boton-blanco:hover {
    color: #000 !important;
    text-decoration: underline !important;
}

.boton-blanco:active {
    color: #000 !important;
    text-decoration: underline !important;
}

/*Boton Rojo*/

.boton-rojo {
    background: #d0373a;
    background-image: linear-gradient(bottom, #D03739 0%, #E64F63 100%);
    background-image: -o-linear-gradient(bottom, #D03739 0%, #E64F63 100%);
    background-image: -moz-linear-gradient(bottom, #D03739 0%, #E64F63 100%);
    background-image: -webkit-linear-gradient(bottom, #D03739 0%, #E64F63 100%);
    background-image: -ms-linear-gradient(bottom, #D03739 0%, #E64F63 100%);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #D03739),color-stop(1, #E64F63));
    background-clip: padding-box;
    border-top: 1px solid #af4052;
    border-right: 1px solid #af4052;
    border-bottom: 1px solid #a32e38;
    border-left: 1px solid #af4052;
    border-radius: 5px;
    box-shadow: inset 0 1px 0 0 #eb7286, 0 1px 2px 0 #b3b3b3;
    color: #fff!important;
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
    padding: 5px 10px;
    text-align: center;
    text-shadow: 0 -1px 1px #c63844;
}

.boton-rojo:hover {
    background: #e4e4e4;
    background-image: linear-gradient(bottom, #C12C40 0%, #E5344C 100%);
    background-image: -o-linear-gradient(bottom, #C12C40 0%, #E5344C 100%);
    background-image: -moz-linear-gradient(bottom, #C12C40 0%, #E5344C 100%);
    background-image: -webkit-linear-gradient(bottom, #C12C40 0%, #E5344C 100%);
    background-image: -ms-linear-gradient(bottom, #C12C40 0%, #E5344C 100%);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #C12C40),color-stop(1, #E5344C));
    border-top: 1px solid #AF4051;
    border-right: 1px solid #AF4052;
    border-bottom: 1px solid #A32E38;
    border-left: 1px solid #AF4052;
    box-shadow: inset 0 1px 0 0 #eb7286, 0 0 0 0 #CCC;
    cursor: pointer;
}

.boton-rojo:active {
    background: #d0373a!important;
    border: 1px solid #993646!important;
    box-shadow: inset 0 0 6px 3px #dd2c49, 0 1px 0 0 #CCC!important;
    background-clip: padding-box!important;
    font-weight: normal!important;
    text-shadow: 0!important;
}

¿Mucho codigo para unos botones cierto? pero la compatibilidad y el acabado final vale la pena, para hacer uso de estos botones usamos la siguiente estructura en html:

<a class="boton-azul boton-centro" href="#">
     <span class="boton-text-all-color">Texto del boton</span>
</a>

Siempre usaremos la misma estructura para hacer uso de alguno de los botones, lo unico que cambiaremos es lo que esta marcado en rojo, ese nombre define el color que obtendra finalmente el boton, pueden elegir uno de los siguientes:

boton-azul
boton-rojo
boton-verde
boton-blanco

Eso seria todo, aqui les dejo como quedaran finalmente al usarlos:


Taringa V5 R3 

Entradas Albums 

Slider en CSS3 

SLamp Menu