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: HTML/CSS— Tagged with: UI components, mixin, sass, snippets

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. Tweet me @hiljaa if you want to make a correction etc.

  • © 2021 Antti Hiljá
  • About
  • Follow me in Twatter → @hiljaa
  • All rights reserved yadda yadda.
  • I can put just about anything here, no one reads the footer anyways.
  • console.log('Smash the patriarchy!')
  • I love u!