Long Shadow Button
The flat design long shadow: a diagonal band that fades out from the button toward the bottom right and stretches on hover. Two skewed pseudo-elements meet on the diagonal and scale from the edges.
Also known as: flat long shadow, diagonal shadow hover, long shadow css.
HTML
<button class="btn-long-shadow">Subscribe</button>
CSS
.btn-long-shadow {
--c: var(--btn-color, #3b82f6);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5em;
font: 600 var(--btn-size, 18px)/1.2 system-ui, sans-serif;
cursor: pointer;
--len: 2.6em;
--shade: color-mix(in srgb, var(--c) 40%, transparent);
position: relative;
padding: 0.8em 1.8em;
border: 0;
border-radius: 0.2em;
background: var(--c);
color: #fff;}
.btn-long-shadow::before,
.btn-long-shadow::after {
content: "";
position: absolute;
pointer-events: none;
transform-origin: top left;
transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.btn-long-shadow::before {
top: 100%;
left: 0;
width: 100%;
height: var(--len);
background: linear-gradient(var(--shade), transparent);
transform: skewX(45deg) scaleY(0.3);
}
.btn-long-shadow::after {
top: 0;
left: 100%;
width: var(--len);
height: 100%;
background: linear-gradient(to right, var(--shade), transparent);
transform: skewY(45deg) scaleX(0.3);
}
.btn-long-shadow:is(:hover, :focus-visible)::before { transform: skewX(45deg) scaleY(1); }
.btn-long-shadow:is(:hover, :focus-visible)::after { transform: skewY(45deg) scaleX(1); }
@media (prefers-reduced-motion: reduce) {
.btn-long-shadow, .btn-long-shadow *, .btn-long-shadow::before, .btn-long-shadow::after, .btn-long-shadow *::before, .btn-long-shadow *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--btn-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--btn-size. Every other dimension is inem, so the whole thing scales together. Currently previewing18px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.