27 CSS Button Hover Effects 27 / 27
3D Press
Layered box-shadows create a physical 3D extrusion.
The code
<button class="bhe-27__btn">3D Press</button>
<button class="bhe-27__btn">3D Press</button>.bhe-27__btn {
padding: 12px 32px;
font-size: 13.5px;
font-family: inherit;
font-weight: 500;
cursor: pointer;
letter-spacing: 0.02em;
background: transparent;
color: inherit;
}
.bhe-27__btn {
background: #7c6cff;
color: #fff;
border: none;
border-radius: 8px;
box-shadow:
0 6px 0 #4a3ab0,
0 8px 16px rgba(74, 58, 176, 0.4);
transition:
transform 0.15s cubic-bezier(0.23, 1, 0.32, 1),
box-shadow 0.15s cubic-bezier(0.23, 1, 0.32, 1);
}
.bhe-27__btn:hover {
transform: translateY(-3px);
box-shadow:
0 9px 0 #4a3ab0,
0 14px 24px rgba(74, 58, 176, 0.45);
}
.bhe-27__btn:active {
transform: translateY(4px);
box-shadow:
0 2px 0 #4a3ab0,
0 4px 8px rgba(74, 58, 176, 0.3);
} .bhe-27__btn {
padding: 12px 32px;
font-size: 13.5px;
font-family: inherit;
font-weight: 500;
cursor: pointer;
letter-spacing: 0.02em;
background: transparent;
color: inherit;
}
.bhe-27__btn {
background: #7c6cff;
color: #fff;
border: none;
border-radius: 8px;
box-shadow:
0 6px 0 #4a3ab0,
0 8px 16px rgba(74, 58, 176, 0.4);
transition:
transform 0.15s cubic-bezier(0.23, 1, 0.32, 1),
box-shadow 0.15s cubic-bezier(0.23, 1, 0.32, 1);
}
.bhe-27__btn:hover {
transform: translateY(-3px);
box-shadow:
0 9px 0 #4a3ab0,
0 14px 24px rgba(74, 58, 176, 0.45);
}
.bhe-27__btn:active {
transform: translateY(4px);
box-shadow:
0 2px 0 #4a3ab0,
0 4px 8px rgba(74, 58, 176, 0.3);
}More from 27 CSS Button Hover Effects
Minimalist Border & Outline Drawing Hover EffectsModern 3D Skeuomorphic Button Press EffectsNeo-Brutalist & Cyberpunk Button Glow EffectsSliding Background Color Wipe Button EffectsLiquid Fill & Organic Morphing Button EffectsKinetic Text Flip & Icon Reveal Button EffectsLiquid FillMagnetic BorderGlitch SliceNeon PulseSplit RevealDiagonal Shutter
View the full collection →