Category: Buttons & Links

Back to Docs

Navigation

Button Variables

There may be times when you want to design your own custom button, but you still want to use specific values from ACSS’s global button settings. If this is the case, you can use button variables.

Available button variables

The following variables reference the global button styles you’ve set in ACSS.

  • var(--btn-border-size) – Button border width
  • var(--btn-radius) – Button border-radius
  • var(--outline-btn-border-size) – Outline button border width
  • var(--btn-letter-spacing) – Button letter spacing
  • var(--btn-line-height) – Button line height
  • var(--btn-pad-x) – Button inline padding (left/right)
  • var(--btn-pad-y) – Button block padding (top/bottom)
  • var(--btn-text-decoration) – Button text-decoration
  • var(--btn-text-style) – Button font style value
  • var(--btn-text-transform) – Button text transform value
  • var(--btn-weight) – Button font-weight
  • var(--btn-width) – Button minimum width

Example custom button

Let’s say we want to create a button that shares all the same general styling as our default buttons but has a gradient background instead of a solid background:

.gradient-button {
  background: linear-gradient(var(--action-medium), var(--action));
  padding: var(--btn-pad-y) var(--btn-pad-x);
  font-size: var(--text-m);
  line-height: var(--btn-line-height);
  letter-spacing: var(--btn-letter-spacing);
  border-width: var(--btn-border-size);
  border-style: var(--btn-border-style);
  border-color: transparent;
  font-weight: var(--btn-weight);
  text-decoration: var(--text-decoration);
  font-style: var(--btn-text-style);
  text-transform: var(--btn-text-transform);
  min-inline-size: var(--btn-width);
}
Code language: CSS (css)

Now you have a custom gradient button that will still inherit any changes you make to your global button styles in the ACSS dashboard.