Round Buttons2

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>
<div class="corners"> 
    <div class="cornertext">What I Believe</div> 
</div>
<div class="corners"> 
    <div class="cornertext">Donate</div> 
</div>

CSS

.corners{
    position:relative;
    background:#fff;
    width:220px; 
    height: 40px;
    -webkit-border-radius: 25px;  
    -moz-border-radius: 25px;  
    border-radius: 25px;
    margin-bottom:3px;
    margin-top:3px;
    text-align: center;
    color:#8B5E3C;
}
.cornertext {
    font: Times New Roman;
    font-style: italic;
    font-weight: bold;
    font-size: 25px;
    height:50px; 
    position: inherit;
    top:5px;  
    left:0px;    
}

JavaScript

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