Creating a variable button part 1

So I make websites! Sometimes you want a button, and this button has many shapes and sizes.

I also like css custom properties and try to make stuff that utillizes those. So I wanted to make a reusable and 'themeable' button.

Let's ask ChatGPT for help!

The Prompt #

what kind of custom css properties would a button element need to make it super adjustable per button. Build a css with all css variables;

The response #

There are many CSS properties that can be used to make a button element adjustable, depending on the desired functionality and design. Here are some examples:

:root {
  /* Colors */
  --button-background-color: #007bff;
  --button-background-color-hover: #0069d9;
  --button-background-color-active: #005cbf;
  --button-text-color: #ffffff;

  /* Border */
  --button-border-width: 1px;
  --button-border-style: solid;
  --button-border-color: #007bff;
  --button-border-radius: 4px;

  /* Padding */
  --button-padding: 8px 16px;

  /* Size */
  --button-min-width: 64px;
  --button-min-height: 36px;

  /* Font */
  --button-font-size: 16px;
  --button-font-weight: 400;
  --button-line-height: 1.5;

  /* Transition */
  --button-transition-duration: 0.2s;
  --button-transition-property: background-color, border-color, color, box-shadow;
}

/* Button styles */
button {
  /* Colors */
  background-color: var(--button-background-color);
  color: var(--button-text-color);
  border: var(--button-border-width) var(--button-border-style) var(--button-border-color);
  border-radius: var(--button-border-radius);

  /* Padding */
  padding: var(--button-padding);

  /* Size */
  min-width: var(--button-min-width);
  min-height: var(--button-min-height);

  /* Font */
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  line-height: var(--button-line-height);

  /* Transition */
  transition-duration: var(--button-transition-duration);
  transition-property: var(--button-transition-property);
}

/* Button hover state */
button:hover {
  background-color: var(--button-background-color-hover);
  border-color: var(--button-background-color-hover);
}

/* Button active state */
button:active {
  background-color: var(--button-background-color-active);
  border-color: var(--button-background-color-active);
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
}

This CSS defines a variety of CSS custom properties (or variables) that can be used to adjust the appearance of a button element. These properties cover things like the background color of the button, the border style and color, the padding, font size and weight, and transition effects. The button element itself is styled using these custom properties, making it easily adjustable.

In this example, the custom properties are defined using the :root selector, which sets the global scope for the properties. This allows them to be easily reused throughout the CSS document. The button styles are then defined using these custom properties, which can be overridden or adjusted as needed on a per-button basis.

Conclusion #

I was kind of surprised by the result because it was such a good starting point!

In another post I'll show how I would write this.

• Next: Simulate a bootstrap like grid with SCSS
• Previous: DDEV for local development of Drupal 9 and 10