27 CSS Button Hover Effects 12 / 27
Diagonal Shutter
A skewed gradient panel wipes diagonally across the button like a camera shutter opening.
The code
<button class="bhe-12__btn">Hover Me</button>
<button class="bhe-12__btn">Hover Me</button>.bhe-12__btn {
padding: 12px 32px;
font-size: 13.5px;
font-family: inherit;
font-weight: 500;
border-radius: 8px;
cursor: pointer;
letter-spacing: 0.02em;
color: inherit;
background: transparent;
}
.bhe-12__btn {
position: relative;
overflow: hidden;
z-index: 0;
border: 1px solid rgba(255, 255, 255, 0.18);
transition:
color 0.3s,
border-color 0.3s;
}
.bhe-12__btn::before {
content: "";
position: absolute;
top: 0;
left: -105%;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #7c6cff 0%, #ff6c8a 100%);
transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1);
z-index: -1;
transform: skewX(-15deg);
}
.bhe-12__btn:hover::before {
left: 0;
}
.bhe-12__btn:hover {
border-color: transparent;
} .bhe-12__btn {
padding: 12px 32px;
font-size: 13.5px;
font-family: inherit;
font-weight: 500;
border-radius: 8px;
cursor: pointer;
letter-spacing: 0.02em;
color: inherit;
background: transparent;
}
.bhe-12__btn {
position: relative;
overflow: hidden;
z-index: 0;
border: 1px solid rgba(255, 255, 255, 0.18);
transition:
color 0.3s,
border-color 0.3s;
}
.bhe-12__btn::before {
content: "";
position: absolute;
top: 0;
left: -105%;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #7c6cff 0%, #ff6c8a 100%);
transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1);
z-index: -1;
transform: skewX(-15deg);
}
.bhe-12__btn:hover::before {
left: 0;
}
.bhe-12__btn:hover {
border-color: transparent;
}More from 27 CSS Button Hover Effects
Cursor SpotlightMinimalist 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 Reveal
View the full collection →