Button 24

Home » Components » Buttons » Button 24

Button 24


/* ===== Button 24 ===== */

#button-24 .btn {
	position: relative;
	overflow: hidden;
	border: none;
	text-transform: uppercase;
	font-weight: 700;
}

#button-24 .btn span {
	position: relative;
	z-index: 2;
}

#button-24 .btn:before {
	position: absolute;
	content: "";
	top: 0;
	height: 102%;
	left: -25%;
	width: 0%;
	background-color: var(--success);
	transform: skew(-22deg);
	transition-duration: .6s;
	z-index: 1;
}

#button-24 .btn:hover:before {
	width: 180%;
}