Pure CSS Menu Button

Playing around with some code.

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>


  <div id="menuClose">
    <div class="menuCloseLine" id="lineTop"></div>
    <div class="menuCloseLine" id="lineMid"></div>
    <div class="menuCloseLine" id="lineBtm"></div>
  </div>

CSS

.menuCloseLine{
  height: 5px;
  width: 32px;
  background-color: #555;
  vertical-align: middle;
  transition: all .2s ease-in-out;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  -ms-transition: all .2s ease-in-out;
}
#lineTop{ margin: 0 0 5px 0; }
#lineMid{ margin: 0 0 5px 0; }