Skip to main content

Buttons

CozyCSS has build-in button components with multiple colors and sizes.

Base class​

The base class for buttons is .btn. You can use it with any other class for color and size. By default, the .btn class uses the --primary-color, --text-primary, --medium-button-padding, --medium-button-font-size and --medium-button-border-radius

<button class="btn">Click me!</button>

Sizing​

Small​

You can also make the button use the --small-button-padding, --small-button-font-size and --small-button-border-radius by adding the .btn-small class.

<button class="btn btn-small">Click me!</button>

Large​

You can also make the button use the --large-button-padding, --large-button-font-size and --large-button-border-radius by adding the .btn-large class.

<button class="btn btn-large">Click me!</button>

Colors​

Secondary​

You can also make the button use the --secondary-color var.

<button class="btn btn-secondary">Click me!</button>

Transparent​

You can also make the button use the transparent background.

<button class="btn btn-transparent">Click me!</button>