JSFiddle - React, Tailwind, and code Playground

by Alex Baumgertner

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: -moz-linear-gradient(center top , #F2F2F2 0%, #E2E2E2 100%) repeat scroll 0 0 transparent;
             border-radius: 6px 6px 6px 6px;
             display: inline-block;
             padding: 1em 2em;
             position: relative;
         }
 
         .b-button:after {
             background-image: -moz-linear-gradient(#000000, #FF0000);
             border-radius: 7px 7px 7px 7px;
             bottom: -1px;
             left: -1px;
             right: -1px;
             z-index: -1;
             content: "";
             position: absolute;
             top: -1px;
         }