Button — HTML & CSS

A themeable button with a ripple effect. Works on a <button> or an <a> (link button). Emits a change event carrying its data-value.

Wiring it up in JS (init, events, API, Vue) is on the JavaScript page.

Live example

Theme:

Color

Size — sm · default · lg

Shape (no color) — r-0 · default · r-round

Last ui-button-change: —

Markup

data-value is the payload emitted on click. The <span> slots around the text are optional icon/label slots:

<button class="UIb primary" data-value="save" type="button">Save</button>

<button class="UIb success g-1" data-value="ok" type="button">
  <span>✓</span>Confirm<span></span>
</button>

<!-- Link button -->
<a class="UIb success" href="/page/2" data-value="/page/2" role="button" tabindex="0">
  Go
</a>

Minimal markup

The smallest working Button — no color, no data-value, no icon slots:

<button class="UIb" type="button">Button</button>