Skip to main content

Make Standard Button Better

Published on .

What is not a button?

Before discussing the standard button, you need to know what is not a standard button.

The following HTML markup is not button elements:

<!-- Only visually look like a button -->
<div class="button">Toggle Theme</div>

Only tell assistive technologies that it is a button 
<div role="button">Add an item</div>

HTML can not be two things at once
<a href="#" role="button">Change your item</a>

<!-- Invalid HTML -->
  <a href="#">Edit your item</a>
<a href="#">
  <button>Buy this product</button>

Make the standard button better

The HTML markup for a button element is:


You can improve it by adding text content that describes the purpose of the button.

<!-- A text button -->
<button>Create a new profile</button>

<!-- An icon button -->
<button aria-label="Create a new profile">
  <svg focusable="false" aria-hidden="true"><!-- SVG Markup --></svg>

We will continue with the text button to keep things simple.

Then, you need to add a type attribute. This will ensure that the button behaves as expected.

<button type="submit">Create a new profile</button>

In this case, it uses type="submit". You can imagine that the button is inside a <form> element. So it is a submit button. If it is just a regular button, then you should use type="button".

Next, you can style the button to make it better.

button[type] {
  display: inline-block;
  font: inherit;
  padding: 1em;

The attribute selector is used to make sure you always add a type attribute. This way, if you forget to add a type attribute to your button, you will be able to see that the button will not get any styling. In other words, you can see the error.

You can be more specific by specifying the value of the type attribute, button[type="submit"].

Let us say the submit button should be a block element.

button[type="submit"] {
  display: block;
  width: 100%;

You can be creative with the styling. Then, you need to make sure that:

My example

I try making my own buttons — Example of Buttons at


Create good buttons!


Foundations: target sizes

Accessible Icon Buttons

Target Size and 2.5.5

Size matters! Accessibility and Touch Targets