No Time Dad

A blog about web development written by a busy dad

The Baseline Button

I create the same buttons all the time. They always have round corners, a colored border, some random color background, hover style, and focus style. I want to make a new style button but I somehow always end up going back to the generic style.

I’ve tried making different style buttons but I haven’t actually used them anywhere. Too scared, I guess. Maybe the different style buttons aren’t quite ready for prime time anyways.

The other issue I am having lately is that I’m re-writing the same css for buttons over and over. I should instead make a utility class that I can use in various places. This is a little tricky because of the nature of how I create examples for this blog, but even having a simple baseline button selector I could easily copy would be helpful. So, that’s what I’ll try to do.

So, I went searching for button inspiration. What should my baseline button look like? Bootstrap buttons are good, but I don’t like the default filled background or the matching text and borders on their outline buttons. Material buttons are also good, but they have the same kind of filled background as the bootstrap button. Also, their focus state changes the background-color instead of the button border, which I’m not a fan of.

Eventually, I landed on Bulma’s button. The default version is mostly plain, but has some subtle styles that can easily be built on. I think it’ll be important that the button is easy to extend. Especially as I add modifiers to handle different use cases like danger or success buttons.

Building the button

Below is a simple button with normalize.css styles applied. This is mostly what I’d see out of the box if I created a button element. The normalize.css takes care of a couple cross browser quirks. Overall, the button has a gray background, straight corners, and a generic focus ring. Not the most inspiring design.

Although it is boring, this simple button is accessible and works well across most browsers. Its easy to make buttons less accessible and less cross-browser friendly once custom styles start being added.

button {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}
<button type="button">Button</button>

I dug into the Bulma css and noticed that they were re-using the button selectors for a, and input elemets. This is mentioned in their docs. There were a lot of properties on the button selectors and I don’t think I need all of them. It looks like some of them were there to handle the cases where the element was not a button. I think this is a good idea, but not something I want to do here. I’ll just focus on the button element itself.

I’ll start with the Button selector first, then add the pseudo-classes afterwards. This selector isn’t overly complicated. A few important properties are the border-color, color, and padding. The border-color and color property values will change if the user is hovering or focused on the button. Changing the focus style is important for accessibility. The padding is important to note because I increased the size from what Bulma has in their css. I like my buttons on the larger side. The size is easy to change later with a modifier if I needed a smaller button somewhere.

.Button {
  background-color: #fff;
  border-color: #dbdbdb;
  border-width: 1px;
  color: #363636;
  border-radius: 0.5rem;
  padding: 1rem 1.5rem;
}
<button class="Button" type="button">Button</button>

Now that I have the baseline established, I can add the selectors for the :hover and :focus pseudo-classes. The border and color will change slightly on hover and change again for the focus state. Bulma is also using the box-shadow trick to create a rounded outline on focus. I ended up copying their box-shadow value because it looked nice.

Try hovering and clicking on the button below to see how it behaves.

.Button:hover {
  border-color: #b5b5b5;
  color: #363636;
}

.Button:focus {
  outline: none;
  border-color: #485fc7;
  color: #363636;
  box-shadow: 0 0 0 0.125em rgba(72, 95, 199, 0.25);
}

I mentioned it earlier, but it’s important to be able to easily apply modifier classes to the button. Fopr example, if I wanted a button with a blue background and white text I could create a new selector and apply it to the button.

.Button__Blue {
  background-color: lightskyblue;
}
<button class="Button Button__Blue" type="button">Button</button>

Conclusion and code

I think having a baseline button is going to save me a lot of time, which I am looking forward to. I know I didn’t exactly push the design boundaries with this button, but it was still fun digging into various button implementations and modifying them to make them my own. One day I’ll push the boundaries, one day.

.Button {
  background-color: #fff;
  border-color: #dbdbdb;
  border-width: 1px;
  color: #363636;
  border-radius: 0.5rem;
  padding: 1rem 1.5rem;
}

.Button:hover {
  border-color: #b5b5b5;
  color: #363636;
}

.Button:focus {
  outline: none;
  border-color: #485fc7;
  color: #363636;
  box-shadow: 0 0 0 0.125em rgba(72, 95, 199, 0.25);
}

.Button__Blue {
  background-color: lightskyblue;
}
<button class="Button Button__Blue" type="button">Button</button>