CSS interaction lab
10 Animated CSS Buttons
Live CSS
TypewriterA stepped text reveal turns a quiet label into a tiny status update.
Rocket
Icon Swap
Spark
Circle Expand
Shine
Flip
Expand
Badge Arrow
Warp
typewriter.css
01 / 1001.typewriter {02 min-width: 8.5rem;03 border: 0.125rem solid #9b4bd0;04 border-radius: 0.65rem;05 background: transparent;06 padding: 0.8rem 1.25rem;07}08 09.typewriter span { position: relative; }10 11.typewriter:hover span { color: transparent; }12 13.typewriter:hover span::after {14 content: attr(data-hover);15 position: absolute;16 inset: 0 auto auto 0;17 width: 0;18 overflow: hidden;19 color: #a43caf;20 border-right: 0.12rem solid currentColor;21 white-space: nowrap;22 animation: type 0.7s steps(6) forwards;23}24 25@keyframes type { to { width: 6ch; } }