Skip to main content
CSS is fun and cool and I like it.
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