🧔🏻‍♂️ gautier.dev

button {
  all: unset;
  outline: revert;
}

A text-like button

TLDR
Use unset to make it look like text, and revert to bring back the default browser styles.

I recently had a design challenge: how do I create a dropdown menu in breadcrumbs? This challenge lead me to write an interesting solution whose I’ll share here. This article will be focused on the dropdown activator.

What I wanted to achieve

My dropdown activator needed the following:

  • Look like a breadcrumb, followed with a ”▼” dropdown icon
  • Be keyboard accessible

It turned out that these two requirements were fairly easy to meet, and each corresponds to a single CSS property.

An ugly button

I wanted my dropdown activator to be a <button> because it’s already accessible. This element was made to create interactive interfaces, and I did not want to waste time making <span onclick> work like a button.

Let’s start with “basic” HTML:

<Breadcrumbs>
  <Item><a href="/">Inbox</a></Item>
  <Item><button click="showDropdown">Gautier ▼</button></Item>
  <Item>Latest messages</Item>
</Breadcrumbs>

I’m using a Svelte/React/Vue syntax here, but you might consider for instance that <Breadcrumbs> means <div class="breadcrumbs"> with pure HTML and Bootstrap.

Here’s what it looks like:

Example
Inbox
Latest messages

While it looks ugly, it behaves exactly as I want it to behave: it’s a keyboard accessible button – you may tab tab return your way into it.

Make it look like it belongs

We want to make our button looks like its surrounding text. The great news is that browsers now support a way to reset CSS on an element: the all property.

This property can take four different values, let’s try them all!

<button style="all: ...">Button</button>
revertinitialunsetinherit
Example
Example
Example
Example
❌ Brings back the default browser button.❌ Brings back the default raw-text browser style.✅ Uses the default raw-text style.❌ Copies its parent styles (here the <Example> element).

Okay, this looks quite chaotic, but we have found what we wanted: unset make our button look like is surrounding text, with the correct font and all. Let’s try it on our dropdown activator:

Example
Inbox
Latest messages

It looks great now! There is however an issue that is hard to notice: it is not keyboard accessible anymore. When tabbing to it, the focus ring is not visible anymore. From there, two possibilities:

  • Add a button:focus style with some cool focus effects
  • Bring the focus ring back

While the first option would perfectly work, I chose…

Bringing back the focus ring

Indeed, I quite like the default focus ring, and it creates a sense of unity with the link right before the button. Well, we saw earlier that revert and initial both bring back the default browser style, let’s try them both.

<button style="all: unset; outline: ...">Button</button>
revertinitial
Example
Example
✅ Brings back the default focus ring.❌ Raw-text does not have a focus ring.

Sorry mobile users, you will have to trust me on this one. However, if you have a keyboard near your fingers, you may try tabbing between the buttons.

Here’s all the CSS put together:

button {
  all: unset;      /* Makes it look like text */
  outline: revert; /* Brings back the focus ring */
}
Example
Inbox
Latest messages

We now have a beautiful and accessible dropdown button!

Comments

Loading comments...