.square-btn {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--bs-secondary);
  	color: var(--bs-dark);
	display: inline-block;
	font-size: 15px;
	line-height: 15px;
	padding: 18px 18px 17px;
	text-decoration: none;
	cursor: pointer;
	background: transparent;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
	transition: all 900ms cubic-bezier(0.48, 0, 0.12, 1);
}

.square-btn span:first-child {
	position: relative;
	transition: color 600ms cubic-bezier(0.48, 0, 0.12, 1);
	z-index: 10;
}

.square-btn span:last-child {
	color: white;
	display: block;
	position: absolute;
	bottom: 0;
	transition: all 500ms cubic-bezier(0.48, 0, 0.12, 1);
	z-index: 100;
	opacity: 0;
	top: 50%;
	left: 50%;
	transform: translateY(225%) translateX(-50%);
	height: 14px;
	line-height: 13px;
}

.square-btn:after {
	content: "";
	position: absolute;
	bottom: -50%;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--bs-dark);
	transform-origin: bottom center;
	transition: transform 600ms cubic-bezier(0.48, 0, 0.12, 1);
	transform: skewY(9.3deg) scaleY(0);
	z-index: 50;
}

.alternate.square-btn:after {
	background-color: var(--bs-secondary);
}

.square-btn:hover{
	border-color: var(--bs-dark);
}

.square-btn:hover:after {
	transform-origin: bottom center;
	transform: skewY(9.3deg) scaleY(2);
}

.square-btn:hover span:last-child {
	transform: translateX(-50%) translateY(-50%);
	opacity: 1;
	transition: all 900ms cubic-bezier(0.48, 0, 0.12, 1);
}