<html >
<head>
  <meta charset="UTF-8">
  <title>Dots Menu</title>

  <link rel="stylesheet" href="css/style.css">

</head>

<body>

  <div>

    <button class="dots"><span></span></button>
  </div>

  <script src="js/index.js"></script>



</body>
</html>

* {
  padding:0;
  margin:0;
}
body {
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  height:100vh;
  background: #393939;
}

button.dots {
  width:60px;
  height:30px;
  border:none;
  background:transparent;
  position:relative;
  cursor:pointer;
  margin:50px;
  &:focus {
    outline:none;
  }
  



  //  Menu Burger 1
  &.dots {
    &:after,
    &:before,
    span {
      width:10%;
      height:20%;
      border-radius:100px;
      position:absolute;
      left:0px;
      background:#F6A017;
      transform:rotate(0deg);
      transition: all 0.4s;

      left: 1%;
      right: 1%;
      margin: 0 auto;

    }

    &:after,
    &:before {
      content:"";
    }

    &:after {
      top:-10%;
      margin-top:0px;
      
    }

    &:before {
      bottom:-10%;
      margin-bottom:0px;
    }

    span {
      top:50%;
      margin-top:-2px;
    }

    &.on {

      &:after {
        transform:rotate(135deg)translate(9px,-9px);
        width: 100%;
      }

      &:before { 
        transform:rotate(225deg);
        bottom:50%;
        margin-bottom:-2px;
        width: 100%;
      }

      span {
        transform:rotate(135deg);
      }

    }
  }

}
View Compiled 
(function() {
  var  dotsMenu;
  dotsMenu = document.querySelector(".dots");
  
  dotsMenu.addEventListener("click", function() {
    return dotsMenu.classList.toggle("on");
  });

}).call(this);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.