JSFiddle - React, Tailwind, and code Playground

HTML

<div class="button first">Простой градиент</div>
<div class="button second">Выпуклая кнопка</div>
<br>
<div class="button third">Другая выпуклая кнопка</div>
<div class="button fourth">Кнопка в стиле Веб 2.0</div>
<br>
<div class="button fifth">Вдавленная кнопка</div>

CSS

div {
    font-family: Arial;
    font-size: 13px;
    display: inline-block;
    margin-top: 5px;
}
.first, .second, .third, .fourth, .fifth {
    border: 1px solid #000;
    padding: 5px 10px 5px 10px;
    border-radius: 6px;
}
.first {
    background: linear-gradient(to bottom, #09C0C4, #DDF5F5);
}
.second {
    background: linear-gradient(to top, rgba(25, 201, 22, 0.5), rgba(25, 201, 22, 1), rgba(13, 116, 11, 1), rgba(25, 201, 22, 1), rgba(25, 201, 22, 0.5));
}
.third {
    background: linear-gradient(to top, rgba(9, 192, 196, 0.9), rgba(9, 192, 196, 1), rgba(221, 245, 245, 0.5));
    color: #fff;
}
.fourth {
    border: 2px solid #5D6565;
    background: linear-gradient(to top, #0B0A0A, #1A1919, #212020, #302E2E, #353333, #3D3B3B, #858686, #858686, #8D8D8D, #9A9A9A, #BCBCBC, #D9D9D9, #F2F2F2);
    color: #fff;
}
.fifth {
    border: 2px solid #E0E4E4;
    border-style: inset;
    background: linear-gradient(to bottom, #EEF1F1 30%, #B9BFBF 100%);
}