<div class="container">
	<button class="btn play-pause">
		<div class="icon-container">
			<svg class="icon play">
				<use xlink:href="#play"></use>
			</svg>
		</div>
		<div class="icon-container">
			<svg class="icon pause">
				<use xlink:href="#pause"></use>
			</svg>
		</div>
	</button>

	<button class="btn volume-control">
		<div class="icon-container">
			<svg class="icon plus">
				<use xlink:href="#plus"></use>
			</svg>
		</div>
		<div class="icon-container">
			<svg class="icon minus">
				<use xlink:href="#minus"></use>
			</svg>
		</div>
	</button>

	<button class="btn social">
		<div class="icon-container">
			<a href="https://twitter.com/DevLoop01" target="_blank"></a>
			<svg class="icon twitter">
				<use xlink:href="#twitter"></use>
			</svg>
		</div>
	</button>

	<button class="btn social">
		<div class="icon-container">
			<a href="https://codepen.io/dev_loop/" target="_blank"></a>
			<svg class="icon codepen">
				<use xlink:href="#codepen"></use>
			</svg>
		</div>
	</button>
</div>


<svg xmlns="http://www.w3.org/2000/svg" class="icons">
	<symbol id="play" viewBox="0 0 448 512">
		<path
				d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z" />
	</symbol>
	<symbol id="pause" viewBox="0 0 448 512">
		<path
				d="M144 479H48c-26.5 0-48-21.5-48-48V79c0-26.5 21.5-48 48-48h96c26.5 0 48 21.5 48 48v352c0 26.5-21.5 48-48
					48zm304-48V79c0-26.5-21.5-48-48-48h-96c-26.5 0-48 21.5-48 48v352c0 26.5 21.5 48 48 48h96c26.5 0 48-21.5 48-48z" />
	</symbol>
	<symbol id="plus" viewBox="0 0 448 512">
		<path d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67
					14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33
					32-32v-32c0-17.67-14.33-32-32-32z" />
	</symbol>
	<symbol id="minus" viewBox="0 0 448 512">
		<path d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33
					32-32v-32c0-17.67-14.33-32-32-32z" />
	</symbol>
	<symbol id="twitter" viewBox="0 0 512 512">
		<path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452
					0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568
					130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3
					27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431
					13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258
					216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502
					12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273
					41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z" />
	</symbol>
	<symbol id="codepen" viewBox="0 0 512 512">
		<path d="M502.285 159.704l-234-156c-7.987-4.915-16.511-4.96-24.571 0l-234 156C3.714 163.703 0 170.847 0
					177.989v155.999c0 7.143 3.714 14.286 9.715 18.286l234 156.022c7.987 4.915 16.511 4.96 24.571
					0l234-156.022c6-3.999 9.715-11.143 9.715-18.286V177.989c-.001-7.142-3.715-14.286-9.716-18.285zM278
					63.131l172.286 114.858-76.857 51.429L278 165.703V63.131zm-44 0v102.572l-95.429 63.715-76.857-51.429L234
					63.131zM44 219.132l55.143 36.857L44 292.846v-73.714zm190 229.715L61.714 333.989l76.857-51.429L234
					346.275v102.572zm22-140.858l-77.715-52 77.715-52 77.715 52-77.715 52zm22 140.858V346.275l95.429-63.715 76.857
					51.429L278 448.847zm190-156.001l-55.143-36.857L468 219.132v73.714z" />
	</symbol>

</svg>

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	&:focus {
		outline: none;
	}
	&::-webkit-input-placeholder {
		color: #222;
	}
	&::-moz-placeholder {
		color: #222;
	}
}

$bg-color: #f2f2f2;
body {
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background: $bg-color;
}
.icons {
	display: none;
}
button {
	border: 0;
	&:focus {
		border: none;
		outline: 0 !important;
		outline-style: none;
	}
}
.container {
	width: 550px;
	height: 200px;
	display: flex;
	align-items: center;
	justify-content: space-around;

	.btn {
		position: relative;
		width: 80px;
		height: 80px;
		border-radius: 50%;
		background: $bg-color;
		transition: all 100ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
		box-shadow: 0px -6px 10px rgba(255, 255, 255, 1), 0px 4px 15px rgba(0, 0, 0, 0.15);
		cursor: pointer;
		&:after {
			// buttons pseudo element
			content: "";
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			border-radius: 50%;
			z-index: 2;
		}
		&:active {
			// button state active
			box-shadow: 0 15px 20px rgba(0, 0, 0, 0.02);
			&:after {
				box-shadow: inset 0px -2px 5px rgb(255, 255, 255),
					inset 0px 2px 5px rgba(0, 0, 0, 0.15);
			}
		}
		&.active {
			// button with active class
			&.play-pause {
				.icon {
					&.pause {
						opacity: 1;
						transform: translate(-50%, -50%);
					}
					&.play {
						opacity: 0;
						transform: translate(-50%, 50%);
					}
				}
			}
		}

		.icon-container,
		a {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
		a {
			z-index: 10;
		}
		.icon {
			// svg icons
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			display: inline-block;
			fill: #868686;
			height: 1.4rem;
			vertical-align: middle;
			width: 1.4rem;
			transition: all 100ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
		}
		&.play-pause {
			// diff buttons
			.icon {
				&.pause {
					opacity: 0;
					transform: translate(-50%, 50%);
				}
			}
		}
		&.volume-control {
			height: 160px;
			border-radius: 50px;
			&::after {
				border-radius: 50px;
			}
			.icon-container {
				height: 50%;
				&:last-child {
					transform: translateY(100%);
				}
				&:active {
				}
			}
			.icon {
				width: 1.6rem;
				height: 1.6rem;
				&.plus {
					transform: translate(-50%, -50%);
				}
				&.minus {
					transform: translate(-50%, -50%);
				}
			}
		}
	}
}

console.clear();

const buttons = Array.from(document.querySelectorAll("button"));

buttons.forEach(btn => {
	btn.addEventListener("click", () => {
		btn.classList.toggle("active");
	});
});