Plus Icon Rotate Hover
A round add button whose plus spins three eighths of a turn into an X with a springy overshoot, while the button swells and its shadow deepens. The classic FAB hover.
Also known as: plus to x icon css, add button rotate 45, floating action button hover.
HTML
<button class="hfx-plus-icon-rotate" aria-label="Add item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></button>
CSS
.hfx-plus-icon-rotate {
--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;
background: var(--c);
color: #fff;
box-shadow: 0 0.35em 0.9em color-mix(in srgb, var(--c) 30%, transparent);
transition: transform 0.3s ease, box-shadow 0.3s ease;}
.hfx-plus-icon-rotate svg {
width: 1.6em;
height: 1.6em;
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hfx-plus-icon-rotate:is(:hover, :focus-visible) {
transform: scale(1.06);
box-shadow: 0 0.6em 1.3em color-mix(in srgb, var(--c) 40%, transparent);
}
.hfx-plus-icon-rotate:is(:hover, :focus-visible) svg { transform: rotate(135deg); }
@media (prefers-reduced-motion: reduce) {
.hfx-plus-icon-rotate, .hfx-plus-icon-rotate *, .hfx-plus-icon-rotate::before, .hfx-plus-icon-rotate::after, .hfx-plus-icon-rotate *::before, .hfx-plus-icon-rotate *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Tailwind CSS version
The same effect using Tailwind utility classes. No custom CSS or config needed.
<button aria-label="Add item" class="group grid h-12 w-12 place-items-center rounded-full bg-blue-500 text-white shadow-lg shadow-blue-500/30 transition duration-300 hover:scale-105 hover:shadow-xl hover:shadow-blue-500/40"> <svg class="h-6 w-6 transition-transform duration-500 ease-[cubic-bezier(0.34,1.56,0.64,1)] group-hover:rotate-[135deg]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg> </button>
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.