Bookmark Icon Fill Hover
A bookmark that floods with color from the top down, like ink running into the ribbon, and stretches a touch as it fills. The fill is a copy of the path revealed with clip-path inset.
Also known as: save icon animation css, bookmark hover effect, ribbon icon fill.
HTML
<button class="hfx-bookmark-icon-fill" aria-label="Save"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path class="hfx-bookmark-icon-fill-ink" d="M19 21l-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2Z" fill="currentColor"/><path d="M19 21l-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2Z"/></svg></button>
CSS
.hfx-bookmark-icon-fill {
--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;}
.hfx-bookmark-icon-fill svg {
width: 1.6em;
height: 1.6em;
overflow: visible;
transform-origin: 50% 0;
}
.hfx-bookmark-icon-fill-ink {
clip-path: inset(0 0 100% 0);
transition: clip-path 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.hfx-bookmark-icon-fill:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--c) 20%, transparent); }
.hfx-bookmark-icon-fill:is(:hover, :focus-visible) .hfx-bookmark-icon-fill-ink { clip-path: inset(0); }
.hfx-bookmark-icon-fill:is(:hover, :focus-visible) svg {
animation: hfx-bookmark-icon-fill-stretch 0.6s ease-in-out;
}
@keyframes hfx-bookmark-icon-fill-stretch {
0%, 100% { transform: scale(1, 1); }
45% { transform: scale(0.94, 1.14); }
75% { transform: scale(1.03, 0.97); }
}
@media (prefers-reduced-motion: reduce) {
.hfx-bookmark-icon-fill, .hfx-bookmark-icon-fill *, .hfx-bookmark-icon-fill::before, .hfx-bookmark-icon-fill::after, .hfx-bookmark-icon-fill *::before, .hfx-bookmark-icon-fill *::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.