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-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%;
}</>
.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-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);
}
Recent Comments