JSFiddle - React, Tailwind, and code Playground

YouTube Btn

by bitstarr

HTML

<a href="#" class="btn btnBlue">Kanäle</a>
<button class="btn btnBlue">Kanäle</button>
<hr>
<a href="#" class="btn btnGrey">Kanäle</a>
<button class="btn btnGrey">Kanäle</button>

CSS

body { margin: 1em; font: 1em/1.5 sans-serif }

.btn {
    display: inline-block;
    padding: .3em .91em;
    text-decoration: none;
    font-size: .9em;
    font-weight: 700;
    border-radius: 2px;
    border: 1px solid #ccc;
    cursor: pointer;
    outline: none;
    vertical-align: middle;
    white-space: nowrap;
    word-wrap: normal;
}
.btnBlue {
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
    color: #fff;
    background-color: #6891E7;
    background-image: linear-gradient(to bottom, #4495E7 0px, #0053A6 100%);
    border-color: #0053A6 #0053A6 #000000;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset;    
}
.btnBlue:hover {
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 1px 3px rgba(0, 0, 0, 0.5);
    background-image: linear-gradient(to bottom, #096BD2 0px, #0053A6 100%);
    border-color: #002D59 #002D59 #000000;
}
.btnBlue:active,
.btnBlue:focus {
    background-image: linear-gradient(to bottom, #014488 0px, #175EA6 100%);
    border-color: #000000 #002D59 #002D59;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35) inset, 0 1px 0 #FFFFFF;
}

.btnGrey {
    color: #555;
    text-shadow: 0 1px 0 #FFFFFF;
    background-color: #E0E0E0;
    background-image: linear-gradient(to bottom, #FAFAFA 0px, #DCDCDC 100%);
    border-color: #CCCCCC #CCCCCC #AAAAAA;
    box-shadow: 0 0 1px #FFFFFF inset;
}
.btnGrey:hover {
    background-image: linear-gradient(to bottom, #F0F0F0 0px, #E6E6E6 100%);
    border-color: #AAAAAA #AAAAAA #999999;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 0 3px #FFFFFF inset;
}
.btnGrey:active,
.btnGrey:focus {
    background-image: linear-gradient(to bottom, #E6E6E6 0px, #DCDCDC 100%);
    border-color: #888888 #AAAAAA #CCCCCC;
    box-shadow: 0 1px 2px #AAAAAA inset;
}
.btnGrey:focus {
    border-color: #4496E7;
    box-shadow: 0 0 5px #4496E7, 0 0 10px #FFFFFF inset;
    outline: medium none;
}