Skip to content

tate-wagtail

Rounded Button

Rounded Button¶

The Rounded Button comes with three variants: default, active, and outlined.¶

Default¶

<a class="btn btn__rounded btn__rounded--default" >
  <i class="icon btn__icon icon--chevron-down"></i>
  <span class="btn__text">Button</span>
</a>

Active¶

<a class="btn btn__rounded btn__rounded--active" >
  <i class="icon btn__icon icon--cross"></i>
  <span class="btn__text">Button</span>
</a>

Outline¶

<a class="btn btn__rounded btn__rounded--outline" >
  <span class="btn__text">Button</span>
</a>