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;
}

 

.btn-effect-3 {
  transition: 0.25s;
}
.btn-effect-3:hover, 
.btn-effect-3:focus {
  animation: pulse 1s;
  box-shadow: 0 0 0 2em rgba(255,255,255,0);
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 #090; }
}

 

.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;
}