font test on buttons

by Jeremy Bolanos

HTML

<input type="submit" value="Submit" class="font-roboto" />
<input type="submit" value="Submit" class="font-arial" />

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,500italic,500,700,700italic);

:root button:focus, :root input:focus, :root a:focus {
    outline: none;
}
input::-moz-focus-inner {
    border: none;
    padding: 0;
}

.font-roboto {
    font: 300 15px 'Roboto', sans-serif;
}
.font-arial {
    font: 300 15px Arial, sans-serif;
}

input[type="submit"] {
    display: inline-block;
    cursor: pointer;
    padding: 2px 4px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 0;
    text-shadow: 0px -1px 0px rgba(0,0,0,0.2), 0px 1px 0px rgba(255,255,255,0.1);
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2));
}
input[type="submit"]:hover {
    color: rgb(250, 250, 250);
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.4)); 
}
input[type="submit"].active {
    color: rgb(250, 250, 250);
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.6)); 
}

JavaScript

$('input[type="submit"]').click(function(e){
    e.preventDefault();
    if($(this).hasClass('active')) {
        $(this).removeClass('active');
    }else{
        $(this).addClass('active');
    }
});