20 Appendix: advanced CSS

Work-in-progress

20.1 Buttons

20.1.1 .active

This is a class not a pseudoclass, indicates which button(s) are pressed.

20.1.2 :active

A pseudoclass. Clicking is the main way to trigger an :active state.

20.1.3 :focus

A pseudoclass. Mainly used for tabbing. Clicking may focus a button but not always. A box shadow such as box-shadow: 0 0 0 3px lightskyblue; is a good choice

20.1.4 :hover

As expected, can have separate hover behavior for .active buttons.

20.1.5 Example

See the Pen Button .active vs :active by Joyce Robbins (https://codepen.io/jtr13) on CodePen.