Menu Button

by D S

HTML

<div class="grid-button">
    <span class="grid open"></span>
</div>

CSS

html, body {
  background-color: DodgerBlue;
}

.grid-button {
  background: none;
  border: none;
  display: table-cell;
  padding: 30px;
  vertical-align: middle;
  text-align: center;
}

.grid {
  background-color: #FFF;
  color: #FFF;
  display: inline-block;
  height: 5px;
  width: 5px;
  transition: all 0.3s ease-in-out;
}

.grid.open {
  box-shadow: -10px -10px, 0px -10px, 10px -10px, -10px 0px, 10px 0px, -10px 10px, 0px 10px, 10px 10px;
}

.grid.close {
  box-shadow: -5px 0px, -10px 0px, 0px -5px, 0px 10px, 0px -10px, 0px 5px, 10px 0px, 5px 0px;
  transform: rotate(45deg) scale(0.85);
}

JavaScript

$(document).ready(function() {
    $(".grid-button").on("click", function() {
        $(".grid").toggleClass("open close");
    });
});