Skip to content

Instantly share code, notes, and snippets.

@LevinFaber
Last active October 16, 2018 07:52
Show Gist options
  • Save LevinFaber/33fc410165469bc4c4cdb3975cb4f546 to your computer and use it in GitHub Desktop.
Save LevinFaber/33fc410165469bc4c4cdb3975cb4f546 to your computer and use it in GitHub Desktop.
/* <span class="c-burger is-active"></span> */
.c-burger {
display: inline-block;
width: 28px;
padding: 0;
border: 0;
border-bottom: 3px solid currentColor;
background: 0 0;
cursor: pointer;
color: #000
}
.c-burger:after,.c-burger:before,.c-button-1:before {
width: 100%;
content: ""
}
.c-burger.is-light:not(.is-active) {
color: #bdb5b5
}
.c-burger::-moz-focus-inner {
border: 0;
padding: 0
}
.c-burger:after,.c-burger:before {
display: block;
margin-bottom: 5px;
border-bottom: 3px solid currentColor;
transition: transform .5s ease-in-out;
transition: transform .5s ease-in-out,-webkit-transform .5s ease-in-out
}
.c-burger.is-active {
border-bottom: 3px solid transparent
}
.c-burger.is-active:before {
-webkit-transform: rotate(-405deg) translateY(0) translateX(-3px);
-ms-transform: rotate(-405deg) translateY(0) translateX(-3px);
transform: rotate(-405deg) translateY(0) translateX(-3px);
transition: transform .5s ease-in-out;
transition: transform .5s ease-in-out,-webkit-transform .5s ease-in-out
}
.c-burger.is-active:after {
-webkit-transform: rotate(405deg) translateY(-3px) translateX(-5px);
-ms-transform: rotate(405deg) translateY(-3px) translateX(-5px);
transform: rotate(405deg) translateY(-3px) translateX(-5px);
-webkit-transition: -webkit-transform .5s ease-in-out;
-o-transition: transform .5s ease-in-out;
transition: transform .5s ease-in-out;
transition: transform .5s ease-in-out,-webkit-transform .5s ease-in-out
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment