<div>
<button class="js-toggle-state || c-button-reset c-animated-button c-animated-button--hamburger" data-active="false">
<span class="c-animated-button__text">
Menu
</span>
</button>
<button class="js-toggle-state || c-button-reset c-button-reset c-animated-button c-animated-button--hamburger" data-active="true">
<span class="c-animated-button__text">
Menu
</span>
</button>
</div>
<div>
<button class="js-toggle-state || c-button-reset c-animated-button c-animated-button--plus-to-check" data-active="false">
<span class="c-animated-button__text">
Add
</span>
</button>
<button class="js-toggle-state || c-button-reset c-animated-button c-animated-button--plus-to-check" data-active="true">
<span class="c-animated-button__text">
Add
</span>
</button>
</div>
<div>
<button class="js-toggle-state || c-button-reset c-animated-button c-animated-button--arrow-to-check" data-active="false">
<span class="c-animated-button__text">
Add
</span>
</button>
<button class="js-toggle-state || c-button-reset c-animated-button c-animated-button--arrow-to-check" data-active="true">
<span class="c-animated-button__text">
Add
</span>
</button>
</div>
*, *:before, *:after {
box-sizing: border-box;
}
.c-button-reset {
display: inline-block;
font-family: inherit;
font-size: 1em;
outline: none;
border: none;
border-radius: 0;
box-shadow: none;
text-shadow: none;
color: inherit;
cursor: pointer;
padding: 0;
-webkit-tap-highlight-color: transparent;
}
.c-animated-button {
position: relative;
min-width: 40px;
min-height: 40px;
width: 2.5em;
height: 2.5em;
background-color: #FFF;
&__text {
display: inline-block;
text-indent: -3125em;
pointer-events: none;
}
&:before, &:after, &__text:before {
content: "";
display: inline-block;
position: absolute;
top: 50%;
left: 0.375em;
right: 0.375em;
height: 0.250em;
}
&:before, &:after {
transition: transform 300ms cubic-bezier(.75,-0.6,.14,1.59) 150ms;
will-change: transform background-color;
}
&[data-active='true'] {
&:before, &:after {
transition-duration: 150ms;
transition-timing-function: ease-out;
transition-delay: 0s;
}
}
&--plus-to-check, &--arrow-to-check {
&:before, &:after {
background-color: #2AB2C0;
}
&[data-active='true'] {
&:before, &:after {
background-color: #89B937;
}
&:before {
transform: translate(calc(25% - .175em), -.175em) rotate(-45deg) scale(1, 1);
}
&:after {
transform: translate(-25%, .175em) rotate(45deg) scale(.43, 1);
}
}
}
&--plus-to-check {
&:before {
transform: translate(0, 0) rotate(-90deg) scale(1, 1);
}
&:after {
transform: translate(0, 0) rotate(180deg) scale(1, 1);
}
}
&--arrow-to-check {
&:before {
transform: translate(0, 25%) rotate(-45deg) scale(.5, 1);
}
&:after {
transform: translate(0, -150%) rotate(45deg) scale(.5, 1);
}
}
&--hamburger {
&:before {
background-color: #F8A036;
transform: translateY(-250%);
}
&:after {
background-color: #2AB2C0;
transform: translateY(150%);
mix-blend-mode: multiply;
}
&[data-active='true'] {
&:before, &:after {
transition-duration: 150ms;
transition-timing-function: ease-out;
transition-delay: 0s;
}
&:before {
transform: rotate(45deg) translate(0, 0);
}
&:after {
transform: rotate(-45deg) translate(0, 0);
}
}
}
&--hamburger &__text:before {
background-color: #FF3000;
transform: translateY(-50%) scale(1);
opacity: 1;
transition: transform 150ms ease-in 300ms;
will-change: transform opacity;
}
&--hamburger[data-active='true'] &__text:before {
transform: translateY(-50%) scale(0);
transition-timing-function: ease-out;
transition-delay: 0s;
opacity: 0;
}
}
// CSS below is for demo purposes only:
html {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
@media screen and (max-width: 300px) and (max-width: 262.5px) {
:root {
font-size: 14px;
}
}
@media screen and (min-width: 300px) and (min-width: 262.5px), screen and (max-width: 300px) and (min-width: 262.5px) {
:root {
font-size: 5.33333vw;
}
}
@media screen and (min-width: 300px) and (min-width: 1875px) {
:root {
font-size: 100px;
}
}
body {
font-family: sans-serif;
font-size: 1rem;
}
View Compiled
const buttons = document.querySelectorAll(".js-toggle-state");
buttons.forEach( button => {
button.addEventListener("click", e => {
e.preventDefault();
let target = e.target;
target.setAttribute("data-active", target.getAttribute('data-active') === 'true' ? false : true);
});
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.