How to Make Buttons Stand Out with CSS
Tags: css, webdev, codenewbie, design
Published: 2022-03-03 15:21:48

The first thing you’ll notice when you add a button to your website is that you’ve taken a trip back in time to 1999. The default button style is very old-fashioned and I can’t think of a use case where you’d want to keep it as it is. The good news is that there are loads of CSS styles that can make your buttons pop.

## Remove Default

The first thing to do is remove the default buttons styles. It’s one of
those things that you might do 100 times, but you still need to
google every time. The CSS on how to remove the default style is
below.

```CSS
button {
background: none;
color: inherit;
border: none;
padding: 0;
font: inherit;
cursor: pointer;
outline: inherit;
}
```

This will turn a button that looks like this


![default style button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/drr25mz1o5hk3s2uyfme.jpg)

into one that looks like this 


![button with no style](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o5jot7tqy1iayc7exo19.jpg)

## Color and Size

The next thing to do is to add your own styles. Bold colors with high
contrast text will help the button stand out. You will also probably
want to increase the button’s default size to make it more
prominent and add some padding. A call to action button might look like this.

```CSS
button {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
}
```


![button with red background](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wgmvozjj8o82cxecdd7j.jpg)

## Fonts

Fonts can be another great way to make a button look more attractive. I've added the font Oswald from Google Fonts. I like a bold sans-serif font on a button but you should choose whatever you like. Follow the instruction on Google to add the font to your project then insert `font-family: "Oswald", sans-serif;` into the button CSS


![button with custom font](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pojt60mcze45ipcfvutg.jpg)

## Border-radius and Box-shadow

So far the button is standing out a lot more but to make it looks like it seamlessly fits into the webpage it needs a couple more elements. `border-radius` and `box-shadow`. The border-radius will round the corners of the button. How much you want to do this is up to you. You can just take the sharpness off the edges of the corners or turn it into a full circle. `box-shadow` as the name suggests will give your button a shadow, which will give it a cool floating appearance. You can do a lot with `box-shadow` so read more about the properties [here](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow?ref=hackernoon.com)

```CSS
Button {
  background: red;
  color: white;
  border: none;
  padding: 20px;
  font: inherit;
  font-size: 1.6rem;
  cursor: pointer;
  outline: inherit;
  border-radius: 15px;
  box-shadow: 5px 5px 5px #000;
}
```


![button with border-radius and box shadow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bbqxggsv10y9uguh2w2q.jpg)

## Hover and Active

Now our button is looking pretty good, it’s time to add some
functionality. You can add all sorts of styles with `:hover` for when the button is hovered over and `:active` for when the button is clicked. Some of the things you might want to do are:
- change the box shadow
- change shape
- change color
For our button well change the brightness and box-shadow on hover and add indentation when it's clicked with `::active`.

```CSS
button:hover {
  filter: brightness(120%);
  box-shadow: 10px 10px 10px #000;
}

button:active {
  box-shadow: inset 2px 2px 10px #000;
}

```

{% codepen https://codepen.io/Johnypalm/pen/bGYRXrE %}

For some awesome examples of what can be done by manipulating `:hover` and `:active` check out [this website](https://cssbuttons.io/)

## `::After`

What other fun things can be done with buttons? You can combine `::before` and `::after` with `:hover` or `:active` to add extra content to the button. In the code below I’ve added `::after` and `:hover` with CSS animation to create an underline when the button is hovered.

```CSS
button::after {
  content: "";
  display: block;
  height: 5px;
  width: 0;
  background-color: #fff;
  transition: 0.1s width linear;
  margin: 0 auto;
}

button:hover::after {
  width: 100%;
}
```

{% codepen https://codepen.io/Johnypalm/pen/wvPeVyM %}

Now it might be overkill having all of these effects but it shows you what can be achieved.

## Accessibility

There are a couple of important accessibility requirements to bear in mind. Please please please use a `<button>` tag. You can create something that looks and works like a button using `<div>` and `<a>` but it doesn’t have the same semantic meaning as a button. This means that screen readers won’t know that it is a button. A button should look like a button. This is not just good for
accessibility but for anyone trying to navigate your site. With all the styles you can add it’s important to remember that it should still be obvious that the element is a button. It should look “clickable”. If it’s ambiguous it will cause confusion which is not great for accessibility or UX. Adding some `box-shadow` to the button often creates this effect. Make the button easily visible. Much like you want good contrast between text and the background, you also want to give your buttons lots of contrast. It’s also important to show the status of a button. If a button is going to remain depressed after clicking, to show that it is active, consider adding a border or underline so that it can’t be missed. This is important if the button shows the status of something rather than if it’s just to submit a form, for example. Compare: 


![depressed button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/532uvn0irrg0wrccei4k.jpg)


![underlined depressed button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qzzq3i0arnpudnc6mkhk.jpg)