.boton {
    position: relative;
    cursor: pointer;
    font: bold 12px/normal 'Segoe UI', Arial, sans-serif;
    color: #333;
    text-decoration: none;
    text-shadow: 1px 1px rgba(255,255,255,0.5);
    border: 1px solid rgba(0,0,0,.1);
    padding: 5px 10px 6px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background-color: #EEE;
    background-image: -moz-linear-gradient(rgba(255,255,255,0.2), rgba(0,0,0,0.2));
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255,255,255,0.2)), color-stop(100%, rgba(0,0,0,0.2)));
    background-image: -webkit-linear-gradient(rgba(255,255,255,0.2), rgba(0,0,0,0.2));
    background-image: -o-linear-gradient(rgba(255,255,255,0.2), rgba(0,0,0,0.2));
    background-image: linear-gradient(rgba(255,255,255,0.2), rgba(0,0,0,0.2));
    -webkit-box-shadow: inset 0px 1px rgba(255,255,255,0.6), 0px 0px 3px 0px rgba(0,0,0,.2);
    -moz-box-shadow: inset 0px 1px rgba(255,255,255,0.6), 0px 0px 3px 0px rgba(0,0,0,.2);
    box-shadow: inset 0px 1px rgba(255,255,255,0.6), 0px 0px 4px 0px rgba(0,0,0,.2);
    -webkit-user-select: none;
    -moz-user-select: none;
}

.boton::-moz-focus-inner {
    margin: 0;
    padding: 0;
    border: 0;
}

a.boton { outline: 0; color: #343434;}

/* ===[ Default hover ]=== */

.boton:hover, .boton:active {
    text-decoration: none;
    background-color: #F9F9F9;
}



.boton:active {
    top: 1px;
    margin-bottom: 1px;
    border-bottom-width: 1px;
    background-color: #F9F9F9;
    background-image: -moz-linear-gradient(rgba(0,0,0,0.2), rgba(255,255,255,0.2));
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0,0,0,0.2)), color-stop(100%, rgba(255,255,255,0.2)));
    background-image: -webkit-linear-gradient(rgba(0,0,0,0.2), rgba(255,255,255,0.2));
    background-image: -o-linear-gradient(rgba(0,0,0,0.2), rgba(255,255,255,0.2));
    background-image: linear-gradient(rgba(0,0,0,0.2), rgba(255,255,255,0.2));
}



.boton.small {
    padding: 3px 8px 4px;
    font-size: 10px;
}

.boton.large {
    padding: 10px 20px 11px;
    font-size: 14px;
}



.boton.red, .boton.green, .boton.blue, .boton.yellow, .boton.orange {
    color: #FFF;
    text-shadow: 0 -1px rgba(0,0,0,0.15);
}

.boton.red { background-color: #E62727 }

.boton.red:hover, .boton.red:active { background-color: #FF2F2F }

.boton.green { background-color: #91BD09 }

.boton.green:hover, .boton.green:active { background-color: #A0CF0C }

.boton.blue { background-color: #2981E4 }

.boton.blue:hover, .boton.blue:active { background-color: #2F93FF }

.boton.yellow { background-color: #FFB515 }

.boton.yellow:hover, .boton.yellow:active { background-color: #FFC74F }

.boton.orange { background-color: #24660f }

.boton.orange:hover, .boton.orange:active { background-color: #FF782F }