Use button classes on an <a>, <button>, or button-like <input> elements for consistent cross-browser styling.

Button colours

Use contextual button classes to quickly create buttons with meaning.

Active state

Buttons will appear pressed when active. For <button> elements, this is done via :active. For <a> elements, it’s done with .active. However, you may use .active on <button>s (and include the aria-pressed="true" attribute) should you need to replicate the active state.

Disabled state

Make buttons look unclickable by reducing opacity and disabling pointer events. by adding a .disabled class to <a> buttons.