Open / Close Button Animation

In this example below you will see how to do a Open / Close Button Animation with some HTML / CSS and Javascript

Inspired by [https://dribbble.com/shots/1621359-Open-Close-Icon-Animation].Simple open / close menu button CSS animation

Thumbnail
This awesome code was written by chrishutchinson, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright chrishutchinson ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Open / Close Button Animation</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <h1>Open / Close Button Animation</h1>
<p>Tap or click the button below to trigger the animation</p>

<div class="button open">
  <div class="line left"></div>
  <div class="line right"></div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/chrishutchinson/open-close-button-animation-CfmFt */
@import url(https://fonts.googleapis.com/css?family=Raleway);
body {
  font-family: 'Raleway', sans-serif;
  text-align: center;
  background: #915979;
  color: #FFF;
  transition: 0.3s all ease-in;
}
body.open {
  background: #2C85C4;
}

h1, h2, h3, h4, h5, h6, p {
  margin: 0 0 10px 0;
}

div.button {
  height: 40px;
  width: 40px;
  position: relative;
  margin: 0 auto;
  cursor: pointer;
}
div.button div.line {
  width: 5px;
  height: 32px;
  background: #FFF;
  border-radius: 3px;
  display: block;
  position: absolute;
  top: 0;
  transition: all 0.3s cubic-bezier(0.87, 0.39, 0.74, 1.31);
}
div.button div.line.left {
  -webkit-transform: rotateZ(-45deg);
  left: 20px;
}
div.button div.line.right {
  -webkit-transform: rotateZ(45deg);
  left: 20px;
}
div.button.open div.line.left {
  left: 10px;
}
div.button.open div.line.right {
  left: 30px;
}


/*Downloaded from https://www.codeseek.co/chrishutchinson/open-close-button-animation-CfmFt */
jQuery(document).ready(function(){
  $('div.button').on('click', function(){
    $(this).toggleClass('open');
    $('body').toggleClass('open');
  });
});

Comments