Buttons hover effects

Sep 10, 2019 | CSS, Divi

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.

Hover me
</>
.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;
}
Hover me
</>
.btn-effect-2::before {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	margin: 0;
	width: 100%;
	height: 0;
	z-index: -1;
	background: rgba(66,133,244,0.5);
	transition: all .3s ease-out;
	opacity: 1;
}
.btn-effect-2:hover::before {
	height: 100%;
}
Hover me
</>
.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; }
}
Hover me
</>
.btn-effect-4:hover {
	color: #FFF;
	border-color: transparent !important;
}
.btn-effect-4::before, 
.btn-effect-4::after {
	display: inline-block;
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	transition: all .5s ease;
	z-index: -1;
	opacity: 0.5 !important;
}
.btn-effect-4::before {
	top: 0;
	left: 0;
	background: #EA4335;
}
.btn-effect-4::after {
	bottom: 0;
	right: 0;
	background: #4285F4;
	transition-delay: .3s !important;
}
.btn-effect-4:hover::before, 
.btn-effect-4:hover::after {
	width: calc(100% - 10px);
	height: calc(100% - 10px);
}