Hover Over Me

/* ===== Button 23 ===== */

#button-23.btn {
	border-radius: 0;
	overflow: hidden;
	position: relative;
	transition: all 0.3s;
}

#button-23.btn-lg
        height: 50px;
        padding-left: 20px;
        padding-right: 20px;
        display: inline-flex;
        justify-content: center;
        align-items: center;
}

#button-23.btn span {
	display: block;
	border-radius: 0;
	position: relative;
}

#button-23.btn:before, 
#button-23.btn:after, 
#button-23.btn span:before, 
#button-23.btn span:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	transition: all 0.15s;
}

#button-23.btn:before, 
#button-23.btn:after {
	width: 2px;
	height: 0;
}

#button-23.btn span:before, 
#button-23.btn span:after {
	width: 0;
	height: 2px;
	transition-delay: 0.15s;
}

#button-23.btn:after {
	top: auto;
	left: auto;
	right: 0;
	bottom: 0;
}

#button-23.btn span:before {
	right: 0;
	left: auto;
}

#button-23.btn span:after {
	top: auto;
	bottom: 0;
}

#button-23.btn:hover:before, 
#button-23.btn:hover:after {
	height: 100%;
	transition-delay: 0.15s;
}

#button-23.btn:hover span:before, 
#button-23.btn:hover span:after {
	width: 100%;
	transition-delay: 0s;
}

#button-23.btn.btn-outline:before, 
#button-23.btn.btn-outline:after, 
#button-23.btn.btn-outline span:before, 
#button-23.btn.btn-outline span:after {
	background: var(--bs-dark);
}