Tap Hint Attention Button
An idle nudge that teaches as it draws the eye: every few seconds a cursor glides in, taps the button, which dips and sends out a ripple, then the cursor drifts away. It stops the moment you hover.
Also known as: attention button, attention seeker button css, click here hint animation, tap to try button.
HTML
<button class="btn-tap-hint" type="button"> <span class="btn-tap-hint-ripple" aria-hidden="true"></span> Try the live demo <svg class="btn-tap-hint-cursor" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 3.5l13.5 7.2-5.8 1.6 3.3 6.1-2.6 1.4-3.3-6.1-4.3 4.2z" /></svg> </button>
CSS
.btn-tap-hint {
--c: var(--btn-color, #3b82f6);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5em;
padding: 0.75em 1.6em;
border: 0;
border-radius: 0.6em;
font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
position: relative;
isolation: isolate;
padding: 0.85em 1.7em;
border-radius: 0.75em;
background: var(--c);
color: #fff;
box-shadow: 0 1px 0 rgb(255 255 255 / 0.25) inset, 0 0.6em 1.2em -0.6em color-mix(in srgb, var(--c) 80%, transparent);
animation: btn-tap-hint-press 4.2s infinite;
transition: background-color 0.25s ease;}
.btn-tap-hint-ripple {
position: absolute;
inset: 0;
z-index: -1;
overflow: hidden;
border-radius: inherit;
}
.btn-tap-hint-ripple::before {
content: "";
position: absolute;
left: 88%;
top: 74%;
width: 6em;
height: 6em;
margin: -3em 0 0 -3em;
border-radius: 50%;
background: radial-gradient(closest-side, rgb(255 255 255 / 0.5), rgb(255 255 255 / 0.15) 70%, transparent);
opacity: 0;
animation: btn-tap-hint-ripple 4.2s cubic-bezier(0.2, 0.6, 0.35, 1) infinite;
}
.btn-tap-hint-cursor {
position: absolute;
left: 88%;
top: 74%;
width: 1.5em;
height: 1.5em;
margin: -0.22em 0 0 -0.3em;
fill: #fff;
stroke: #111827;
stroke-width: 1.4;
stroke-linejoin: round;
filter: drop-shadow(0 0.15em 0.2em rgb(0 0 0 / 0.3));
transform-origin: 20% 15%;
pointer-events: none;
opacity: 0;
animation: btn-tap-hint-cursor 4.2s infinite;
}
.btn-tap-hint:is(:hover, :focus-visible) {
animation: none;
background-color: color-mix(in srgb, var(--c) 86%, #000);
}
.btn-tap-hint:is(:hover, :focus-visible) .btn-tap-hint-cursor,
.btn-tap-hint:is(:hover, :focus-visible) .btn-tap-hint-ripple::before { animation: none; opacity: 0; }
.btn-tap-hint:focus-visible {
outline: 2px solid var(--c);
outline-offset: 0.2em;
}
.btn-tap-hint:active { transform: scale(0.96); }
@keyframes btn-tap-hint-cursor {
0% { transform: translate(2.2em, 1.6em) rotate(8deg); opacity: 0; animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); }
10% { opacity: 1; }
30% { transform: translate(0, 0) rotate(0deg) scale(1); animation-timing-function: ease-in; }
35% { transform: translate(0, 0) scale(0.84); animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
42% { transform: translate(0, 0) scale(1); }
58% { transform: translate(0, 0) scale(1); opacity: 1; animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0); }
72%, 100% { transform: translate(1.8em, 1.8em) rotate(10deg); opacity: 0; }
}
@keyframes btn-tap-hint-press {
0%, 30%, 100% { transform: scale(1); }
35% { transform: scale(0.96); animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
46% { transform: scale(1); }
}
@keyframes btn-tap-hint-ripple {
0%, 34% { transform: scale(0.1); opacity: 0; }
36% { transform: scale(0.15); opacity: 1; }
70%, 100% { transform: scale(1.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.btn-tap-hint, .btn-tap-hint *, .btn-tap-hint *::before, .btn-tap-hint *::after { animation: none; transition-duration: 0.01s; }
}
@media (prefers-reduced-motion: reduce) {
.btn-tap-hint, .btn-tap-hint *, .btn-tap-hint::before, .btn-tap-hint::after, .btn-tap-hint *::before, .btn-tap-hint *::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.