Round Buttons

Rounded box with color animation

HTML

<script type="text/javascript">
  $(document).ready(function(){
    $(".corners").hover(function() {
      $(this).stop().animate({ backgroundColor: "#fff"}, 'fast');
    },
    function() {
      $(this).stop().animate({ backgroundColor: "#8B5E3C"}, 'fast');
    });
  });
</script>
<div class="corners"> 
    <div class="cornertext">Main Site</div> 
</div>
<div class="corners"> 
    <div class="cornertext">Mobile</div> 
</div>

CSS

.corners{
    position:relative;
    background:#8B5E3C;
    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;    
}