Back

I saw this cool button animation somewhere, but forgot where

the classic text 'curso' render animation, but applied to a button

For the animation to work we use the `steps()` timing function, which unfortunately needs the number of steps. so we can generalise the css for it, but need to specify the text char length with a css variable. Interestingly I needed 'no of steps' = '1 + the number of letters' , in order to align the steps with the char widths.
I'm also using a monospace font for that, although since the animation is so quick it would probably look fine without the mono.

Hover hover me ( or keyboard focus)

this is cool, but the button looks a bit empty, and only works for situations where the button function is clear before hover reveals the text. Could be cool for a button that is enabled / disabled when a form is ready to submit or so.

it might be cool if there is one text, that is then overwritten by the animation on hover.

that's cool, and much clearer. now we can have a normal 'submit' button with a fun extra message that appears.

Here's how it looks with a non mono-font. at this speed we dont notice too much the steps dont align perfectly. we then probably also dont need to be as precise with out number of steps.

and here's how it looks with just a linear animation

this also totatlly works for a different style button.