CSS Button

HTML

<div id="ios-button">My Menu</div>

CSS

body {
    background: rgb(109,131,161);
}

#ios-button {
    display : block; 
    position:absolute;
    z-index : 0;
    left:50px;
    top:50px;    
    height:30px;
    width:auto;
    padding: 0 10px 0 6px;

    background-repeat:repeat-x;
    -webkit-background-size : 30px;
    background-position :0;
    background-image : -webkit-linear-gradient(
        bottom,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0) 50%,
        rgba(255,255,255,0.1) 50%,
        rgba(255,255,255,0.3) 100%
        );

    -webkit-border-radius: 5px;

    border-bottom: 1px solid rgba(255,255,255,0.4);

    -webkit-box-shadow :0 -1px 1px rgba(0,0,0,0.2)inset,
        0 1px 2px rgba(0,0,0,0.8)inset;

    font-family : HelveticaNeue;
    font-weight: 400;
    font-size : 12px;
    line-height : 30px;
    text-align:center;
    color:#fff;
    text-shadow : 0px -1px 0px rgba(0,0,0,0.8);
}


#ios-button,
#ios-button:before {
    background-color: rgba(74,108,155,1);/*hovercolor*/

}

#ios-button.over,
#ios-button.over:before {
    background-color: rgba(54,88,135,1);/*hovercolor*/

}

JavaScript

$('#ios-button').hover(function() {
    $(this).toggleClass('over');
});