How to make a button - Styling

Step 2: Button styling

Not too much to say about this part, but here is the code:

/* define default button theme on root */
:root {
  --btn-color: #FFFFFF;
  --btn-background-color: #EA4C89;
  --btn-background-color-hover: #F082AC;
}

/* normalise base element */
.anchor-btn {
  display: inline-block;
  text-decoration: unset;
  color: var(--btn-color);
}

.button-btn {
  display: inline-block;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--btn-color);
}

/* button styling */
.btn {
  background-color: var(--btn-background-color);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  padding: 10px 16px;
  text-align: center;
  transition: color 100ms;
  vertical-align: baseline;
  cursor: pointer;
}

.btn:focus, .btn:focus-visible {
  outline: 2px dotted #999;
  outline-offset: -2px;
}

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

The look and feel of our buttons will typically come from a designer, but as you can see here, we are setting some of these values with css variables such as “--btn-background-color” and “--btn-background-color-hover” if you want to know more about this I go into depth in an earlier post.

The thing to take away from here is “:focus” and “:focus-visible”. I see too often people wiping away inbuilt focus indicators with css such as “outline: none” do not do this! Or if you are going to do this, replace it with some other indicator of focus, this is such a massive letdown on the accessibility side, and no matter how much your designer tells you that you don’t need it, you 100% do. You let your user down if you cannot tab through your website and use it reliably! In my case, I create a custom outline that looks nicer than the bog-standard outline.

Next Up: part 4 - customisation