Botones para blogger estilo T!

Hoy os traigo unos botones muy chulos echos por Z-Kreations espero que os gusten.

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

Cualquier cosa dejame un comentario, saludos y hasta la proxima

Via: Z-Kreations

Leer más...