JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>b-button</title>
</head>
<body style="margin: 50px;">

<span class="b-button">Кнопка</span>

</body>
</html>

CSS

.b-button {
             background-image: -moz-linear-gradient(center top, #F2F2F2 0%, #E2E2E2 100%);
             background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#F2F2F2), to(#E2E2E2));
             background-image: -webkit-linear-gradient(#F2F2F2 0%, #E2E2E2 100%);
             background-image: -o-linear-gradient(#F2F2F2 0%, #E2E2E2 100%);
             background-image: linear-gradient(#F2F2F2 0%, #E2E2E2 100%);
             border-radius: 6px 6px 6px 6px;
             display: inline-block;
             padding: 1em 2em;
             position: relative;
         }
 
         .b-button:after {
             background-image: -moz-linear-gradient(#000000, #FF0000);
             background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000000), to(#FF0000));
             background-image: -webkit-linear-gradient(#000000, #FF0000);
             background-image: -o-linear-gradient(#000000, #FF0000);
             background-image: linear-gradient(#000000, #FF0000);
             border-radius: 7px 7px 7px 7px;
             bottom: -1px;
             left: -1px;
             right: -1px;
             z-index: -1;
             content: "";
             position: absolute;
             top: -1px;
         }