In preparation for applying the effects on the buttons, and to not affect any other buttons on the page/site, I’ve added a class of .btn-effect to all buttons and the following CSS, then a class of .btn-effect-1, .btn-effect-2, .btn-effect-3, etc. to each button incrementally to be able to style them individually.

.btn-effect-1::before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 50%;
	margin: 0;
	width: 0;
	height: 100%;
	opacity: 0;
	z-index: -1;
	background: rgba(66,133,244,0.5);
	transition: all .7s ease-in-out;
	transform: skewX(-45deg);
}
.btn-effect-1:hover::before {
	width: 140%;
	margin-left: -70%;
	opacity: 1;
}