Interaction states

Not only color — size, padding, and label text can change too

Color + press (:hover / :active)

Hover darkens the fill. :active on “Click and hold” also shrinks font-size and padding so it feels pressed.

Font size grows on :hover

button.grow:hover raises font-size and padding. On :active it shrinks slightly again.

Text swap on :hover

Two spans live in the button. Default shows .main; on hover display: none / display: inline swaps to .alt. That is how you “change text” with CSS only.

:focus — bigger type + background

Email

Name

Tab or click into a field. Focus changes border, background, font-size, and padding — not only color (rule 44).

What you can change in a pseudo-class

color / background / border
font-size and padding (grow or shrink)
background images (see Cards page)
Visible text via two spans + display

Rules 43–45 in ../rules.md. Allow list: allowed.md.

Important HTML

Buttons and links receive interactive states.

<button type="button">Save changes</button>
<a class="text-link" href="#">Text link</a>

Important CSS

Hover and focus change more than colour.

button:hover { background: #0f766e; }
button:focus { outline: 2px solid #38bdf8; }
.text-link:hover { text-decoration: underline; }