Button is a clickable element that has a behaver to do such as take to another page, download a file etc..

To use the button, you need the following class ".null-button".

Button styles:

- null-button-primary: The background color of the button will be transformed to match your brand color.

- null-button-secondary: The border and text color will be transformed to match your brand color.

Button

<button class="null-button null-button-primary">Button</button>

Button

<button class="null-button null-button-secondary">Button</button>

By default, the border radius of .null-button is 8px ( you can change it from var(--null-border-radius)

If you want the button looks like a pill use the following class ".null-button-pill"

Button

<button class="null-button null-button-primary null-button-pill">Button</button>

Button

<button class="null-button null-button-secondary null-button-pill">Button</button>

If you want the button looks like a square use the following class ".null-button-square"

Button

<button class="null-button null-button-primary null-button-square">Button</button>

Button

<button class="null-button null-button-secondary null-button-square">Button</button>

Want to make the button disabled? Just add ".null-button-disabled" class.

Button Button Button

<button  class="null-button null-button-primary null-button-disabled">Button</button>

<button  class="null-button null-button-primary null-button-pill null-button-disabled">Button</button>

<button  class="null-button null-button-primary null-button-square null-button-disabled">Button</button>

If you want to make the button like a bold word with nice hover animation just use the followin class .null-button-hover

Button

<button class="null-button-hover">Button</button>