Skip to main content
CSS is fun and cool and I like it.
Article

Overriding Default Button Styles

There are a variety of "buttons" in HTML. You've got:

<button>Button</button>
<input type="button" value="Button"/>

Plus, for better or worse, people like having links that are styled to match the look of other true buttons on the site

<a href="#0" class="button">Button</a>

One challenge is getting all those elements to look and layout exactly the same. We'll cover that a few ways.… Read article

Link

Designing Button States

Article

CSS Basics: Styling Links Like a Boss

You are probably well acquainted with how links looks without any styling at all. That blue. That underline. That's a link in it's purest form. But what if we want to change things up a bit? Perhaps blue doesn't work with your website's design. Maybe you have an aversion to underlines. Whatever the reason, CSS lets us style links just like any other element.

Article

Building a Good Download… Button?

The semantics inherent in HTML elements tell us what we’re supposed to use them for. Need a heading? You’ll want a heading element. Want a paragraph? Our trusty friend <p></p> is here, loyal as ever. Want a download? Well, you’re going to want... hmm.

What best describes a download? Is it a triggered action, and therefore should be in the domain of the <button></button> element? Or is it a destination, and therefore best described using an <a></a> element?… Read article

Article

A Bit on Buttons

Here's three recent things that have come across my desk in recent days regarding buttons. One, an accessibility flub that needed to be fixed. Two, an article about the fundamental differences between links and buttons but how they can look too similar for our own good. Three, the logical extreme of the button element: never use them outside of forms unless injected with JavaScript.

Article

Making a Pure CSS Play/Pause Button

Globally, the media control icons are some of the most universally understood visual language in any kind of interface. A designer can simply assume that every user not only knows ▶️ = play, but that users will seek out the icon in order to watch any video or animation.

Reportedly introduced in the 1960s by Swedish engineer Philip Olsson the play arrow was first designed to indicate the direction where the tape would go when reading on reel-to-reel tape players. … Read article

Link

Buttons in Design Systems

Snippet

Perfect CSS Sprite / Sliding Doors Button

Big note here! Sliding doors is a pretty old technique. It had its time on the web, but it's probably not the smartest way to go these days. We have border-radius now and gradient backgrounds and all that, which unlock most of what we were trying to achieve back in the day of sliding doors.

But it's still fun to document how it works, so here it is:

<a href="#" class="button">
  <span>Sliding Doors Button</span>
</a>
.button {
  float: left;
  clear: 
Read article
icon-link icon-logo-star icon-search icon-star