Round Buttons

Rounded box with color animation

by Koubenec

HTML

<div class="corners"> 
    <div class="cornertext">Main Site</div> 
</div>
<div class="corners"> 
    <div class="cornertext">Mobile</div> 
</div>

CSS

.corners{
    position:relative;
    background:#fff;
    width:250px; 
    height: 45px;
    -webkit-border-radius: 25px;  
    -moz-border-radius: 25px;  
    border-radius: 25px;
    margin-bottom:5px;
    margin-top:5px;
}
.cornertext {
    font:italic Times New Roman;
    font-size: 18px;
    color:#fff;
    text-align: center;
    height:50px; 
    position: inherit;
    top:15px;  
    left:0px;    
}

JavaScript

$(document).ready(function() {
    $(".corners").hover(function() {
        $(this).stop().animate({
            "backgroundColor": "#8B5E3C"
        }, 'fast');
    }, function() {
        $(this).stop().animate({
            "backgroundColor": "#fff"
        }, 'fast');
    });
});