Buttons

This page contains all the button css variables.

Primary Button

Text Colours

These can be used for color or fill properties.

.colour {
  color: var(--col-btn-primary-text);
  fill var(--col-btn-primary-text-hover);
}

You can define the variation by appending -[variation] to the end of the variable name.

Background Colours

These can be used for background properties.

.background {
  background: var(--col-btn-primary-bg);
  background-color: var(--col-btn-primary-bg-hover);
}

You can define the variation by appending -[variation] to the end of the variable name.

Outline Colours

These can be used for border or box-shadow properties.

.border {
  border: 1px solid var(--col-btn-primary-outline);
  box-shadow: 1px 1px var(--col-btn-primary-outline);
}

Secondary Button

Text Colours

These can be used for color or fill properties.

.colour {
  color: var(--col-btn-secondary-text);
  fill var(--col-btn-secondary-text-hover);
}

You can define the variation by appending -[variation] to the end of the variable name.

Background Colours

These can be used for background properties.

.background {
  background: var(--col-btn-secondary-bg);
  background-color: var(--col-btn-secondary-bg-hover);
}

You can define the variation by appending -[variation] to the end of the variable name.

Outline Colours

These can be used for border or box-shadow properties.

.border {
  border: 1px solid var(--col-btn-secondary-outline);
  box-shadow: 1px 1px var(--col-btn-secondary-outline);
}

Tertiary Button

Text Colours

These can be used for color or fill properties.

.colour {
  color: var(--col-btn-tertiary-text-hover);
  fill var(--col-btn-tertiary-text-hover);
}

You can define the variation by appending -[variation] to the end of the variable name.

Background Colours

These can be used for background properties.

.background {
  background: var(--col-btn-tertiary-bg);
  background-color: var(--col-btn-tertiary-bg-hover);
}

You can define the variation by appending -[variation] to the end of the variable name.

Outline Colours

These can be used for border or box-shadow properties.

.border {
  border: 1px solid var(--col-btn-tertiary-outline);
  box-shadow: 1px 1px var(--col-btn-tertiary-outline);
}

Inverted Button

Text Colours

These can be used for color or fill properties.

.colour {
  color: var(--col-btn-inverted-text);
  fill var(--col-btn-inverted-text-hover);
}

You can define the variation by appending -[variation] to the end of the variable name.

Background Colours

These can be used for background properties.

.background {
  background: var(--col-btn-inverted-bg);
  background-color: var(--col-btn-inverted-bg-hover);
}

You can define the variation by appending -[variation] to the end of the variable name.

Outline Colours

These can be used for border or box-shadow properties.

.border {
  border: 1px solid var(--col-btn-inverted-outline);
  box-shadow: 1px 1px var(--col-btn-inverted-outline);
}

Text Button

Text Colours

These can be used for color or fill properties.

.colour {
  color: var(--col-btn-text-text);
  fill var(--col-btn-text-text-hover);
}

You can define the variation by appending -[variation] to the end of the variable name.

Background Colours

These can be used for background properties.

.background {
  background: var(--col-btn-text-bg);
  background-color: var(--col-btn-text-bg-hover);
}

You can define the variation by appending -[variation] to the end of the variable name.

Outline Colours

These can be used for border or box-shadow properties.

.border {
  border: 1px solid var(--col-btn-text-outline);
  box-shadow: 1px 1px var(--col-btn-text-outline);
}