JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="buttons">
    <li>
        <button class="btn" type="button">
            <span>Hinzufügen</span>
        </button>
    </li>
    
    <li>
        <button class="btn" disabled="disabled" type="button">
            <span>Hinzufügen</span>
        </button>
    </li>
</ul>

CSS

.buttons {
    margin: 20px;
}

.buttons li {
    float: left;
    margin-right: 5px;
}

.btn::-moz-focus-inner {
    border: 0;
    padding: 0;
}

.btn {
    display: inline-block;
    overflow: visible;
    position: relative;
    height: 29px;
    margin: 0;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: 0;
    padding: 0;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
    color: #000;
    background-color: #bfe500;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, transaprent), color-stop(100%, rgba(0, 0, 0, 0.1)));
    background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.1));
    background-image: -moz-linear-gradient(transparent, rgba(0, 0, 0, 0.1));
    background-image: -ms-linear-gradient(transparent, rgba(0, 0, 0, 0.1));
    background-image: -o-linear-gradient(transparent, rgba(0, 0, 0, 0.1));
    background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.1));
    -webkit-transition: background linear 0.2s;
    -moz-transition: background linear 0.2s;
    -ms-transition: background linear 0.2s;
    -o-transition: background linear 0.2s;
    transition: background linear 0.2s;
    cursor: pointer;
}

.btn:focus,
.btn:hover,
.btn:active {
    outline: 0 none;
    background-color: #ffc600;
}

.btn:active {
    top: 1px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

.btn:before,
.btn span:before,
.btn span:after {
    position: absolute;
    top: 50%;
    left: 0;
    content: "";
}

.btn:before {
    left: 12px;
    width: 16px;
    height: 16px;
    margin-top: -7px;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px; 
    border-radius: 16px;
    -webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255,...