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

If you've designed a button that looks like a link, and you still wan 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
    &::-moz-focus-inner {
        padding: 0;
        border: 0;

Usage in it’s simplicity:

.button {
    @include link-button();

See the Pen Sass Mixin to make a button look like link. by hilja (@hilja) on CodePen


Club-Mate, the beverage →