Paper Plane Send Button
Click send and the paper plane crouches, then shoots out through the right edge with the label chasing it, and 'Sent' lands with a check. One-shot keyframes on a hidden checkbox.
Also known as: send button animation css, send message button, paper plane button.
HTML
<label class="btn-paper-plane-send">
<input class="btn-paper-plane-send-input" type="checkbox" aria-label="Send">
<span class="btn-paper-plane-send-face" aria-hidden="true">
<svg class="btn-paper-plane-send-plane" viewBox="0 0 24 24"><path d="M3 11.2L21 3l-6.8 18-3.2-6.8z"/><path d="M11 14.2L21 3"/></svg>
<span class="btn-paper-plane-send-label">Send</span>
<span class="btn-paper-plane-send-sent"><svg viewBox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Sent</span>
</span>
</label>CSS
.btn-paper-plane-send {
--c: var(--btn-color, #3b82f6);
position: relative;
display: inline-grid;
place-items: center;
font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
cursor: pointer;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.btn-paper-plane-send-input {
position: absolute;
inset: 0;
z-index: 1;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
}
.btn-paper-plane-send-face {
position: relative;
display: flex;
align-items: center;
gap: 0.55em;
width: 7.6em;
height: 2.9em;
box-sizing: border-box;
padding-left: 1.4em;
overflow: hidden;
border-radius: 1.45em;
background: var(--c);
color: #fff;
box-shadow: 0 0.4em 1em -0.4em var(--c);
transition: transform 0.2s ease;
}
.btn-paper-plane-send-face svg {
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.btn-paper-plane-send-plane {
flex: none;
width: 1.3em;
height: 1.3em;
}
.btn-paper-plane-send-sent {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 0.35em;
opacity: 0;
}
.btn-paper-plane-send-sent svg {
width: 1.15em;
height: 1.15em;
stroke-width: 3;
}
.btn-paper-plane-send:active .btn-paper-plane-send-face { transform: scale(0.95); }
.btn-paper-plane-send-input:focus-visible ~ .btn-paper-plane-send-face {
outline: 2px solid var(--c);
outline-offset: 0.2em;
}
.btn-paper-plane-send-input:checked ~ .btn-paper-plane-send-face .btn-paper-plane-send-plane {
animation: btn-paper-plane-send-fly 1s forwards;
}
.btn-paper-plane-send-input:checked ~ .btn-paper-plane-send-face .btn-paper-plane-send-label {
animation: btn-paper-plane-send-label 0.4s cubic-bezier(0.5, 0, 0.75, 0) 0.1s forwards;
}
.btn-paper-plane-send-input:checked ~ .btn-paper-plane-send-face .btn-paper-plane-send-sent {
animation: btn-paper-plane-send-in 0.4s cubic-bezier(0.3, 0.7, 0.4, 1.4) 0.85s forwards;
}
@keyframes btn-paper-plane-send-fly {
0% { transform: none; }
18% { transform: translate(-0.35em, 0.15em) rotate(-12deg) scale(0.9); animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0.3); }
70%, 100% { transform: translate(7.4em, -0.9em) rotate(-20deg) scale(1); }
}
@keyframes btn-paper-plane-send-label {
to { opacity: 0; transform: translateX(3em); }
}
@keyframes btn-paper-plane-send-in {
from { opacity: 0; transform: translateY(0.6em); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.btn-paper-plane-send, .btn-paper-plane-send *, .btn-paper-plane-send::before, .btn-paper-plane-send::after, .btn-paper-plane-send *::before, .btn-paper-plane-send *::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.