Pmiguelfpereira
11/13/2017 - 4:21 PM

animate button

html
content_copyfile_download
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="css.css" type="text/css" media="screen">
<style>
	.c-hamburger {
	    display: block;
	    position: relative;
	    overflow: hidden;
	    margin: 5px 0 0;
	    padding: 0;
	    width: 76px;
	    height: 80px;
	    font-size: 0;
	    text-indent: -9999px;
	    -webkit-appearance: none;
	    -moz-appearance: none;
	    appearance: none;
	    box-shadow: none;
	    border-radius: none;
	    border: none;
	    cursor: pointer;
	    -webkit-transition: background .3s;
	    transition: background .3s;
	}
	.c-hamburger:focus {
	    outline: 0;
	}
	.c-hamburger span {
	    display: block;
	    position: absolute;
	    top: 36px;
	    left: 18px;
	    right: 18px;
	    height: 3px;
	    background: #48AE1A;
	}
	.c-hamburger span::after, .c-hamburger span::before {
	    position: absolute;
	    display: block;
	    left: 0;
	    width: 100%;
	    height: 3px;
	    background-color: #48AE1A;
	    content: ""}

	.c-hamburger span::before {
	    top: -13px;
	}
	.c-hamburger span::after {
	    bottom: -13px;
	}

	.c-hamburger--htx {
	    background-color: transparent;
	}
	.c-hamburger--htx span {
	    -webkit-transition: background 0s .3s;
	    transition: background 0s .3s;
	}
	.c-hamburger--htx span::after, .c-hamburger--htx span::before {
	    -webkit-transition-duration: .3s, .3s;
	    transition-duration: .3s, .3s;
	    -webkit-transition-delay: .3s, 0s;
	    transition-delay: .3s, 0s;
	}
	.c-hamburger--htx span::before {
	    -webkit-transition-property: top, -webkit-transform;
	    transition-property: top, transform;
	}
	.c-hamburger--htx span::after {
	    -webkit-transition-property: bottom, -webkit-transform;
	    transition-property: bottom, transform;
	}
	.c-hamburger--htx.is-active {
	    background-color: transparent;
	}
	.c-hamburger--htx.is-active span {
	    background: 0 0;
	}
	.c-hamburger--htx.is-active span::before {
	    top: 0;
	    -webkit-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	    transform: rotate(45deg);
	}
	.c-hamburger--htx.is-active span::after {
	    bottom: 0;
	    -webkit-transform: rotate(-45deg);
	    -ms-transform: rotate(-45deg);
	    transform: rotate(-45deg);
	}
	.c-hamburger--htx.is-active span::after, .c-hamburger--htx.is-active span::before {
	    -webkit-transition-delay: 0s, .3s;
	    transition-delay: 0s, .3s;
	}
</style>
</head>
<body>
<button class="c-hamburger c-hamburger--htx">
  <span>toggle menu</span>
</button>

<script>
	(function() {

	  "use strict";

	  var toggles = document.querySelectorAll(".c-hamburger");

	  for (var i = toggles.length - 1; i >= 0; i--) {
	    var toggle = toggles[i];
	    toggleHandler(toggle);
	  };

	  function toggleHandler(toggle) {
	    toggle.addEventListener( "click", function(e) {
	      e.preventDefault();
	      (this.classList.contains("is-active") === true) ? this.classList.remove("is-active") : this.classList.add("is-active");
	    });
	  }

	})();
</script>
</body>
</html>