<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);
	});
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.