Expanding Email Signup Button
A 'Subscribe' pill that widens into an email field with a send arrow when clicked, and stays open while it has text. The label points at the input, and :focus-within drives the whole morph.
Also known as: button expands to input css, newsletter subscribe button, subscribe button to input.
HTML
<div class="btn-expand-email"> <input class="btn-expand-email-field" id="btn-expand-email-field" type="email" placeholder="you@example.com" aria-label="Email address"> <label class="btn-expand-email-cover" for="btn-expand-email-field">Subscribe</label> <button class="btn-expand-email-send" type="submit" aria-label="Subscribe"><svg viewBox="0 0 24 24"><path d="M5 12h13M13 6.5l5.5 5.5-5.5 5.5"/></svg></button> </div>
CSS
.btn-expand-email {
--c: var(--btn-color, #3b82f6);
position: relative;
width: 8.6em;
height: 3em;
border-radius: 1.5em;
background-color: var(--c);
box-shadow: 0 0.4em 1em -0.4em var(--c), inset 0 0 0 2px var(--c);
font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
transition:
width 0.5s cubic-bezier(0.65, 0, 0.35, 1),
background-color 0.3s ease 0.1s,
transform 0.2s ease;
}
.btn-expand-email-field {
position: absolute;
inset: 0;
width: 100%;
box-sizing: border-box;
padding: 0 3.4em 0 1.3em;
border: 0;
border-radius: inherit;
background: transparent;
color: #0f172a;
font: 500 0.95em/1 system-ui, sans-serif;
outline: none;
opacity: 0;
transition: opacity 0.2s ease;
}
.btn-expand-email-field::placeholder { color: #94a3b8; }
.btn-expand-email-cover {
position: absolute;
inset: 0;
display: grid;
place-items: center;
border-radius: inherit;
color: #fff;
cursor: pointer;
transition: opacity 0.2s ease 0.15s;
}
.btn-expand-email-send {
position: absolute;
top: 0.35em;
right: 0.35em;
display: grid;
place-items: center;
width: 2.3em;
height: 2.3em;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--c);
color: #fff;
cursor: pointer;
opacity: 0;
visibility: hidden;
transform: scale(0.4) rotate(-90deg);
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s 0.2s;
}
.btn-expand-email-send svg {
width: 1.2em;
height: 1.2em;
fill: none;
stroke: currentColor;
stroke-width: 2.4;
stroke-linecap: round;
stroke-linejoin: round;
}
.btn-expand-email:not(:focus-within):active { transform: scale(0.95); }
.btn-expand-email:is(:focus-within, :has(.btn-expand-email-field:not(:placeholder-shown))) {
width: 17em;
background-color: color-mix(in srgb, var(--c) 5%, #fff);
}
.btn-expand-email:focus-within { box-shadow: 0 0.4em 1em -0.4em var(--c), inset 0 0 0 2px var(--c), 0 0 0 0.25em color-mix(in srgb, var(--c) 25%, transparent); }
.btn-expand-email:is(:focus-within, :has(.btn-expand-email-field:not(:placeholder-shown))) .btn-expand-email-field {
opacity: 1;
transition-delay: 0.25s;
}
.btn-expand-email:is(:focus-within, :has(.btn-expand-email-field:not(:placeholder-shown))) .btn-expand-email-cover {
opacity: 0;
pointer-events: none;
transition-delay: 0s;
}
.btn-expand-email:is(:focus-within, :has(.btn-expand-email-field:not(:placeholder-shown))) .btn-expand-email-send {
opacity: 1;
visibility: visible;
transform: none;
transition: opacity 0.2s ease 0.3s, transform 0.45s cubic-bezier(0.3, 1.5, 0.5, 1) 0.3s, visibility 0s 0.3s;
}
@media (prefers-reduced-motion: reduce) {
.btn-expand-email, .btn-expand-email *, .btn-expand-email::before, .btn-expand-email::after, .btn-expand-email *::before, .btn-expand-email *::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.