JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<button class="link">I am button.link</button>
<br><br><br>
<button>I am regular button</button>
<br><br><br>
<header>
<button class="christmas">I am button.christmas..I should be green – move me after the :not() and I work</button> 
</header>

SCSS

@mixin button {
    background-color: blue;
    color: #FFF;
    display: inline-block;
    font-weight: bold;
    padding: 0.4em 1em;
    text-align: center;
    vertical-align: top;

    &:hover,
    &:focus {
        background-color: darken(blue, 10%);
    }
}

@mixin link {
    color: blue;
    cursor: pointer;
    text-decoration: none;

    &:hover,
    &:active {
        color: darken(blue, 15%);
    }
}
header {
  button.christmas {
    background-color: green;
  }
}
button:not(.link),
input[type="button"]:not(.link),
input[type="reset"]:not(.link),
input[type="submit"]:not(.link) {
    @include button;
    border: none;
    cursor: pointer;
}

button.link,
input[type=button].link,
input[type="button"].link,
input[type="reset"].link,
input[type="submit"].link {
    @include link;
    background: transparent;
}















a, abbr, address, article, aside, audio, b, blockquote, body, button, canvas, caption, cite, code, datalist, dd, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, hr, i, iframe, img, input, label, legend, li, main, meter, nav, object, ol, option, p, pre, progress, q, section, select, span, strong, sub, sup, table, tbody, td, textarea, tfoot, th, thead, tr, u, ul, video {
    border: 0;
    box-sizing: border-box;
    font: inherit;
    font-size: 100%;
    margin: 0;
    outline: 0;
    padding: 0;
    vertical-align: baseline;
}