/*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
boton-rojo
boton-verde
boton-blanco
Eso seria todo, aqui les dejo como quedaran finalmente al usarlos: