JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<a href="" class="button">ZORNET.RU</a>
<a href="" class="button add">Добавить</a>
<a href="" class="button edit">Редактировать</a>
<a href="" class="button delete">Удалить</a>
<a href="" class="button save">Сохранить</a>
<a href="" class="button email">Отправить письмо</a>

<br><br><br><br>

<a href="" class="button like">Нравится</a>
<a href="" class="button next">Далее</a>
<a href="" class="button star">В закладки</a>
<a href="" class="button spark">Жучара</a>
<a href="" class="button play">Погнали!</a>

<br><br><br><br>

<a href="http://twitter.com/catalinred" class="button tw">Ходи за мной</a>
<a href="http://www.facebook.com/RedTeamDesign" class="button fb">Стань вентилятором</a>

<br><br><br><br>

<button class="button">Чистая кнопка</button>
<button class="button save">Кнопка с иконкой</button>
<button class="button" disabled>Неактивная кнопка</button>
<button class="button save" disabled>Неактивная кнопка с иконкой</button>

<br><br><br><br>


<input class="button" type="submit" value="Тип: кнопка-подтверждение">
<input class="button" type="button" value="Тип: кнопка">
<input class="button" type="submit" value="Тип: неактивная кнопка-подтверждение" disabled>
<input class="button" type="button" value="Тип: неактивная кнопка" disabled>

CSS

.button {
     display: inline-block;
     white-space: nowrap;
     background-color: #ddd;
     background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc));
     background-image: -webkit-linear-gradient(top, #eee, #ccc);
     background-image: -moz-linear-gradient(top, #eee, #ccc);
     background-image: -ms-linear-gradient(top, #eee, #ccc);
     background-image: -o-linear-gradient(top, #eee, #ccc);
     background-image: linear-gradient(top, #eee, #ccc);
     border: 1px solid #777;
     padding: 0 1.5em;
     margin: 0.5em;
     font: bold 1em/2em Arial, Helvetica;
     text-decoration: none;
     color: #333;
     text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
     -moz-border-radius: .2em;
     -webkit-border-radius: .2em;
     border-radius: .2em;
     -moz-box-shadow: 0 0 1px 1px rgba(255, 255, 255, .8) inset, 0 1px 0 rgba(0, 0, 0, .3);
     -webkit-box-shadow: 0 0 1px 1px rgba(255, 255, 255, .8) inset, 0 1px 0 rgba(0, 0, 0, .3);
     box-shadow: 0 0 1px 1px rgba(255, 255, 255, .8) inset, 0 1px 0 rgba(0, 0, 0, .3);
 }
 .button:hover {
     background-color: #eee;
     background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#ddd));
     background-image: -webkit-linear-gradient(top, #fafafa, #ddd);
     background-image: -moz-linear-gradient(top, #fafafa, #ddd);
     background-image: -ms-linear-gradient(top, #fafafa, #ddd);
     background-image: -o-linear-gradient(top, #fafafa, #ddd);
     background-image: linear-gradient(top, #fafafa, #ddd);
 }
 .button:active {
     -moz-box-shadow: 0 0 4px 2px rgba(0, 0, 0, .3) inset;
     -webkit-box-shadow: 0 0 4px 2px rgba(0, 0, 0, .3) inset;
     box-shadow: 0 0 4px 2px rgba(0, 0, 0, .3) inset;
     position: relative;
     top: 1px;
 }
 .button:focus {
     outline: 0;
     background: #fafafa;
 }
 .button:before {
     background: #ccc;
     background: rgba(0, 0, 0, .1);
     float: left;
     width: 1em;
     text-align: center;
     font-size: 1.5em;
 ...