March 11, 2022

How to make a button - Styling

The look and feel of a button typically comes from a designer, but you the developer must preserve accessibility.

How to make a button - Styling
Click here for the start of this series

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

Tagged with css, design, html, --css-variables

something not right? Open a PR