Button and link states

Key thing: buttons keep focus after a mouse click.

Buttons

Text color> changes to red when :active (i.e. on click)

• button text A button with no styles
• button text A button with some basic styles. Gets browser default outline on :focus.
• button text border, background, and text color change on :focus, browser default outline is removed.
• button text outline changes on :focus. Can only be a rectangle. no rounded corners.
• button text box-shadow added on :focus, browser default outline is removed.
• button text box-shadow added on :focus that looks a bit like a border, browser default outline is removed.
• button text box-shadow added on :focus, background, and text color change on :focus, browser default outline is removed, .

Links

• link text with no styles
• link text with basic styles, including :hover. Gets browser default outline on :focus.
• link text with :focus styles applied.
• link text with :focus styles applied, :hover styles also applied on focus.