Trash Can Icon Hover
A trash can whose lid lifts and tips open on a hinge at one end, with a spring overshoot, as the button turns solid. Good for a delete action that should feel deliberate.
Also known as: delete icon animation css, trash bin lid open, delete button hover.
HTML
<button class="hfx-trash-icon-lid" aria-label="Delete"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><g class="hfx-trash-icon-lid-lid"><path d="M3 6h18"/><path d="M9 6V4.5A1.5 1.5 0 0 1 10.5 3h3A1.5 1.5 0 0 1 15 4.5V6"/></g><path d="M5 6l1 13.6A2 2 0 0 0 8 21.5h8a2 2 0 0 0 2-1.9L19 6"/><path d="M10 11v6M14 11v6"/></svg></button>
CSS
.hfx-trash-icon-lid {
--c: var(--hfx-color, #3b82f6);
font-size: var(--hfx-size, 16px);
position: relative;
display: grid;
place-items: center;
width: 3.5em;
height: 3.5em;
padding: 0;
border: 0;
border-radius: 50%;
cursor: pointer;
border-radius: 0.85em;
background: color-mix(in srgb, var(--c) 12%, transparent);
color: var(--c);
transition: background-color 0.25s ease, color 0.25s ease;}
.hfx-trash-icon-lid svg {
width: 1.6em;
height: 1.6em;
overflow: visible;
}
.hfx-trash-icon-lid-lid {
transform-box: view-box;
transform-origin: 12.5% 25%;
transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hfx-trash-icon-lid:is(:hover, :focus-visible) {
background: var(--c);
color: #fff;
}
.hfx-trash-icon-lid:is(:hover, :focus-visible) .hfx-trash-icon-lid-lid {
transform: translateY(-9%) rotate(-22deg);
}
@media (prefers-reduced-motion: reduce) {
.hfx-trash-icon-lid, .hfx-trash-icon-lid *, .hfx-trash-icon-lid::before, .hfx-trash-icon-lid::after, .hfx-trash-icon-lid *::before, .hfx-trash-icon-lid *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--hfx-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--hfx-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - 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.