JSFiddle - React, Tailwind, and code Playground

by rulin shyu

HTML

<button class="btn">Default</button>
<button class="btn primary">Primary</button>
<button class="btn success">Success</button>
<button class="btn info">Info</button>
<button class="btn warning">Warning</button>
<button class="btn danger">Danger</button>
<button class="btn link">Link</button>

CSS

.btn {
    /* 預設顏色是 default 的顏色 */
    --text-color: #333;
    --theme-color--main: #fff;
    --theme-color--second: #ccc;

    margin: 5px 0;
    outline: 0;
    border: 1px solid;
    padding: 6px 12px;
    color: var(--text-color);
    border-color: var(--theme-color--second);
    background: var(--theme-color--main);
    border-radius: 4px;
    cursor: pointer;
}

.primary { --text-color: #fff;    --theme-color--main: #337ab7;     --theme-color--second: #2e6da4; }
.success { --text-color: #fff;    --theme-color--main: #5cb85c;     --theme-color--second: #4cae4c; }
.info    { --text-color: #fff;    --theme-color--main: #5bc0de;     --theme-color--second: #46b8da; }
.warning { --text-color: #fff;    --theme-color--main: #f0ad4e;     --theme-color--second: #eea236; }
.danger  { --text-color: #fff;    --theme-color--main: #d9534f;     --theme-color--second: #d43f3a; }
.link    { --text-color: #337ab7; --theme-color--main: transparent; --theme-color--second: transparent; }

.btn:hover {
    /* 預設顏色是 default 的顏色 */
    --theme-color--main: #e6e6e6;
    --theme-color--second: #adadad;
}