JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" class="button">Кнопка</a>




<br/>
<span>
    <a href="#" class="button">SPAN Кнопка</a>
    <a href="#" class="button">btn</a>
</span>
<br/>

<div>
    <a href="#" class="button">DIV Кнопка</a>
    <a href="#" class="button">Кнопка</a>
</div>

<pre>я пишу какой-то 
    текст и 
    тут <a href="#" class="button">Кнопка</a>!!!
</pre>

<p><a href="#" class="button">Оооооооочень бооольшая кнопка</a></p>

CSS

.button {
  font-size: 11px;
  font-family: "Verdana";
  color: rgb( 0, 0, 0 );
  text-indent:0;
  text-align: center;
  text-shadow: 0px 1px 0px rgb( 255, 255, 255 );
  display: inline-block;
  text-decoration: none;
  border-radius: 6px;
  background-image: -moz-linear-gradient(bottom, rgb(226,226,226) 30%, rgb(242,242,242) 70%);
  background-image: -webkit-linear-gradient(bottom, rgb(226,226,226) 30%, rgb(242,242,242) 70%);
  background-image: -ms-linear-gradient(bottom, rgb(226,226,226) 30%, rgb(242,242,242) 70%);
  background-image: linear-gradient(bottom,rgb(226,226,226) 30%, rgb(242,242,242) 70%);
  min-width: 70px;
    width: auto;
  min-height: 20px;
    height: auto;
  line-height: 20px;
  border: 1px solid #ccc;
    padding: 0 5px;
    margin: 2px 0;
}

.button:focus {
  text-shadow: 0px 1px 0px rgb( 255, 255, 255 );
  background-image: -moz-linear-gradient( bottom, rgb(226,226,226) 30%, rgb(242,242,242) 70%);
  background-image: -webkit-linear-gradient( bottom, rgb(226,226,226) 30%, rgb(242,242,242) 70%);
  background-image: -ms-linear-gradient( bottom, rgb(226,226,226) 30%, rgb(242,242,242) 70%);
  background-image: linear-gradient(bottom,rgb(226,226,226) 30%, rgb(242,242,242) 70%);
  box-shadow: 0px 0px 4px 0px rgb( 0, 35, 214 );
}

.button:hover {
  text-shadow: 0px 1px 0px rgb( 255, 255, 255 );
  background-image: -moz-linear-gradient( bottom, rgb(253,255,204) 30%, rgb(254,255,235) 70%);
  background-image: -webkit-linear-gradient( bottom, rgb(253,255,204) 30%, rgb(254,255,235) 70%);
  background-image: -ms-linear-gradient( bottom, rgb(253,255,204) 30%, rgb(254,255,235) 70%);
  background-image: linear-gradient(bottom,rgb(253,255,204) 30%, rgb(254,255,235) 70%);
}

.button:active {
    position:relative;

  text-shadow: 0px -1px 0px rgb( 255, 255, 255 );
  background-image: -moz-linear-gradient( top, rgb(226,226,226) 30%, rgb(242,242,242) 70%);
  background-image: -webkit-linear-gradient( top, rgb(226,226,226) 30%, rgb(242,242,242) 70%);
 ...