Envelope Open Icon Hover
The envelope flap folds up and open, then a letter slides out of the pocket. The flap is two shapes, one in front and one behind, handed off at the fold so the layering stays right.
Also known as: mail icon animation css, open envelope hover, newsletter icon hover.
HTML
<button class="hfx-mail-icon-open" aria-label="Contact us by email"><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-mail-icon-open-back" d="M2.5 11 12 3.5l9.5 7.5"/><g class="hfx-mail-icon-open-letter"><rect x="7" y="12.5" width="10" height="8" rx="1"/><path d="M9.5 15.5h5M9.5 18h3"/></g><rect class="hfx-mail-icon-open-body" x="2.5" y="11" width="19" height="10" rx="2"/><path class="hfx-mail-icon-open-pocket" d="M3.5 20 9.5 15.5M20.5 20l-6-4.5"/><path class="hfx-mail-icon-open-front" d="M3 11.5 12 17l9-5.5"/></svg></button>
CSS
.hfx-mail-icon-open {
--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: var(--c);
color: #fff;
transition: box-shadow 0.3s ease;}
.hfx-mail-icon-open svg {
width: 1.65em;
height: 1.65em;
overflow: visible;
/* the closed envelope sits low in its box, so lift it to center; it drops back as the letter rises */
transform: translateY(-0.26em);
transition: transform 0.3s ease 0.1s;
}
/* filled with the button color so the body hides the letter inside it */
.hfx-mail-icon-open-body,
.hfx-mail-icon-open-letter rect { fill: var(--c); }
.hfx-mail-icon-open-back,
.hfx-mail-icon-open-front,
.hfx-mail-icon-open-letter {
transform-box: view-box;
transform-origin: 50% 45.83%;
}
/* leaving: letter in, back flap down, front flap closes */
.hfx-mail-icon-open-letter { transition: transform 0.2s ease-in; }
.hfx-mail-icon-open-back {
transform: scaleY(0);
transition: transform 0.15s ease-in 0.15s;
}
.hfx-mail-icon-open-front { transition: transform 0.15s ease-out 0.3s; }
.hfx-mail-icon-open-pocket {
opacity: 0;
transition: opacity 0.15s ease 0.25s;
}
.hfx-mail-icon-open:is(:hover, :focus-visible) { box-shadow: 0 0.45em 1em color-mix(in srgb, var(--c) 35%, transparent); }
.hfx-mail-icon-open:is(:hover, :focus-visible) svg {
transform: translateY(0);
transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s;
}
/* entering: front flap folds up, back flap opens, letter rises */
.hfx-mail-icon-open:is(:hover, :focus-visible) .hfx-mail-icon-open-front {
transform: scaleY(0);
transition: transform 0.15s ease-in;
}
.hfx-mail-icon-open:is(:hover, :focus-visible) .hfx-mail-icon-open-pocket {
opacity: 1;
transition-delay: 0.1s;
}
.hfx-mail-icon-open:is(:hover, :focus-visible) .hfx-mail-icon-open-back {
transform: scaleY(1);
transition: transform 0.2s ease-out 0.15s;
}
.hfx-mail-icon-open:is(:hover, :focus-visible) .hfx-mail-icon-open-letter {
transform: translateY(-41.67%);
transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.28s;
}
@media (prefers-reduced-motion: reduce) {
.hfx-mail-icon-open, .hfx-mail-icon-open *, .hfx-mail-icon-open::before, .hfx-mail-icon-open::after, .hfx-mail-icon-open *::before, .hfx-mail-icon-open *::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.