Fast verdict: for buttons use buttons or web-components derived from buttons. For dropdowns use b (or another tag - another example), a for hyperlinks, label for titles/headings (not as button title).

Title mix:

Without title mix, because of ico as background on :pseudo-element.

One element for declaration themes: rounded & dark.

buttons: b: Run Visual Studio

Without standard button behaviour (disabled, tab, focus, imitate pushdown by moving text).

button: b: Two actions, dd iconed p Simplest b Disabled b

Uses standard button behaviour (:disabled?!, tab, focus, click), but is not imitated onclick pushdown (by moving text).

Can not be used on dropdowns, because of all hyperlink area focus, which make focus on all dropdown items at the same time!

Simple Disabled Bordered Print

Simplest button behaviour but text-styled, without rectangle background & :visited redefining.

Disabled icons aren't change opacity because of its common space (not own as in buttons rectangles).

a: Title mix pseudo-link, Iconed, Disabled, No mix pseudo-link

button: , , , ,

Some other text

Test vue component Vue push Vue titled & dis Vue simplest

Original sourcecode published in the list of iAMcss-examples.