27 CSS Button Hover Effects 13 / 27
Elastic Lift
A hard bottom shadow creates a physical 3D effect — elastic cubic-bezier makes it bounce on hover.
The code
<button class="bhe-13__btn">Click Me</button>
<button class="bhe-13__btn">Click Me</button>.bhe-13__btn {
padding: 12px 32px;
font-size: 13.5px;
font-family: inherit;
font-weight: 500;
border-radius: 8px;
cursor: pointer;
letter-spacing: 0.02em;
background: transparent;
color: inherit;
}
.bhe-13__btn {
background: #7c6cff;
color: #fff;
border: none;
box-shadow: 0 4px 0 #4a3aad;
transform: translateY(0);
transition:
transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 0.12s;
}
.bhe-13__btn:hover {
transform: translateY(-4px);
box-shadow: 0 8px 0 #4a3aad;
}
.bhe-13__btn:active {
transform: translateY(2px);
box-shadow: 0 2px 0 #4a3aad;
} .bhe-13__btn {
padding: 12px 32px;
font-size: 13.5px;
font-family: inherit;
font-weight: 500;
border-radius: 8px;
cursor: pointer;
letter-spacing: 0.02em;
background: transparent;
color: inherit;
}
.bhe-13__btn {
background: #7c6cff;
color: #fff;
border: none;
box-shadow: 0 4px 0 #4a3aad;
transform: translateY(0);
transition:
transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 0.12s;
}
.bhe-13__btn:hover {
transform: translateY(-4px);
box-shadow: 0 8px 0 #4a3aad;
}
.bhe-13__btn:active {
transform: translateY(2px);
box-shadow: 0 2px 0 #4a3aad;
}