JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<button class="grumen zornet_ru_gusam_1">ZORNET.RU-1</button>
<button class="grumen zornet_ru_gusam_2">ZORNET.RU-2</button>
<button class="grumen zornet_ru_gusam_3">ZORNET.RU-3</button>
<button class="grumen zornet_ru_gusam_5">ZORNET.RU-4</button>

CSS

.grumen {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 31px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 3px 1px;
    -webkit-transition-duration: 0.5s; /* Safari */
    transition-duration: 0.5s;
    cursor: pointer;
}

.zornet_ru_gusam_1 {
    background-color: #f9f4f4;
    color: #0c0c0c;
    border: 2px solid #439e47;
}

.zornet_ru_gusam_1:hover {
    background-color: #4CAF50;
    color: white;
}

.zornet_ru_gusam_2 {
    background-color: #f7f4f4;
    color: #191919;
    border: 2px solid #0981a9;
}

.zornet_ru_gusam_2:hover {
    background-color: #008CBA;
    color: white;
}

.zornet_ru_gusam_3 {
    background-color: #fff9f9;
    color: #131212;
    border: 2px solid #e2372b;
}

.zornet_ru_gusam_3:hover {
    background-color: #f44336;
    color: white;
}

.zornet_ru_gusam_5 {
    background-color: #eceaea;
    color: #232222;
    border: 2px solid #545050;
}

.zornet_ru_gusam_5:hover {
    background-color: #555555;
    color: white;
}