clubmate.fi

A good[ish] website

Web development blog, loads of UI and JavaScript topics

Sass mixin to make a button element look like a normal link

Filed under: UI components— Tagged with: sass

If you’ve designed a button that looks like a link, but you still want to be semantic, then this mixin may come handy.

It looks like this:

@mixin link-button() {
  overflow: visible; // Shrinkwrap the text in IE7-
  margin: 0;
  padding: 0;
  border: 0;
  color: blue; // Match your link colour
  background: transparent;
  font: inherit; // Inherit font settings (doesn’t work in IE7-)
  line-height: normal; // Override line-height to avoid spacing issues
  text-decoration: underline; // Make it look linky
  cursor: pointer; // Buttons don’t make the cursor change in all browsers
  -moz-user-select: text; // Make button text selectable in Gecko

  /* 
   * Remove mystery padding in Gecko browsers.
   * See https://bugzilla.mozilla.org/show_bug.cgi?id=140562
   */
  &::-moz-focus-inner {
    padding: 0;
    border: 0;
  }
}

Usage in it's simplicity:

.button {
  @include link-button();
}

See a Demo

Source

Comments would go here, but the commenting system isn’t ready yet, sorry.