SodhanaLibrary

We can design menu button in an interactive way like displaying different shapes with animation . Observe the below diagram for shapes with user actions.

DEMO - Interactive Menu Button Design with CSS3 and jQuery

HTML Markup 

<div class="side-nav">
  <button class="navbar-toggle">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar top"></span>
    <span class="icon-bar middle"></span>
    <span class="icon-bar bottom"></span>
  </button>
  <div class="menuPanel">
  </div>
</div>

CSS 

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0
}

.navbar-toggle {
    position: relative;
    float: right;
    margin-right: 15px;
    padding: 9px 10px;
    margin-top: 23px;
    margin-bottom: 23px;
    border: 1px solid transparent;
    border-radius: 1px;
    cursor:pointer;
    z-index:1;
}

.navbar-toggle:focus {
    outline: none
}

.navbar-toggle .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px
}

.navbar-toggle .icon-bar+.icon-bar {
    margin-top: 4px
}

.navbar-toggle {
    display: block;
    background: #2fc7f7;
    float: none;
    width: 75px;
    height: 75px;
    border-radius: 0;
    margin-right: 15px;
    padding: 10px 15px;
    margin-top: 8px;
    margin-bottom: 8px
}

.navbar-toggle:hover {
    -webkit-transition: margin-bottom 500ms ease-in-out;
    transition: margin-bottom 500ms ease-in-out
}

.navbar-toggle:hover span.icon-bar {
    position: relative
}

.navbar-toggle:hover span.icon-bar.top {
    top: 7.5px;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg)
}

.navbar-toggle:hover span.icon-bar.middle {
    left: 0px;
    position: relative
}

.navbar-toggle:hover span.icon-bar.bottom {
    bottom: 7.5px;
    position: relative;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg)
}

.navbar-toggle span.icon-bar {
    background: #fff;
    display: block;
    width: 40px;
    height: 4px;
    border-radius: 1px;
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out
}

.navbar-toggle.active {
    -webkit-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out
}

.navbar-toggle.active span.icon-bar {
    position: relative;
    -webkit-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out
}

.navbar-toggle.active span.icon-bar.top {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: 0px
}

.navbar-toggle.active span.icon-bar.middle {
    width: 0;
    height: 0;
    margin: 0 auto
}

.navbar-toggle.active span.icon-bar.bottom {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    margin: 0;
    top: -4px;
}
.menuPanel {
    background: #2fc7f7;
    font-size:40px;
    padding:60px 40px 40px 80px;
    display:none;
    position:absolute;
    top:0px;
    color:#fff;
    line-height:60px;
}

.side-nav {
    position:relative;
    margin:auto;
    width:500px;
}

.side-nav a{
    color:#fff;
    text-decoration:none;
}