Шаблоны CSS3-кнопок

В данной статье вы узнаете, как создать симпатичные кнопки при помощи CSS3, и вы легко можете использовать их на своих сайтах, добавив соответствующие классы для кнопок или ссылок.

Возможности шаблонов CSS3-кнопкок

  • Простота в использовании.
  • Включает в себя хак для переходов градиентов.
  • Ни одного изображения не используется.

Кнопки

В принципе, для создания кнопки все что вам нужно сделать, это вставить следующий код:

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

или

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

Кроме того, можно использовать также <input type="submit">, но для лучшего кросс-браузерного рендеринга рекомендую использовать приведенный выше код.

CSS

.button{
  display: inline-block;
  *display: inline;
  zoom: 1;
  padding: 6px 20px;
  margin: 0;
  cursor: pointer;
  border: 1px solid #bbb;
  overflow: visible;
  font: bold 13px arial, helvetica, sans-serif;
  text-decoration: none;
  white-space: nowrap;
  color: #555;
  background-color: #ddd;
  background-image: linear-gradient(top, rgba(255,255,255,1),
                                         rgba(255,255,255,0)),
                    url(data:image/png;base64,iVBORw0KGg[...]QmCC);
  transition: background-color .2s ease-out;
  background-clip: padding-box; /* Fix bleeding */
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .3),
              0 2px 2px -1px rgba(0, 0, 0, .5),
              0 1px 0 rgba(255, 255, 255, .3) inset;
  text-shadow: 0 1px 0 rgba(255,255,255, .9);  
}
.button:hover{
  background-color: #eee;
  color: #555;
}
.button:active{
  background: #e9e9e9;
  position: relative;
  top: 1px;
  text-shadow: none;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
}

Настраиваем различные размеры кнопок

Если вы хотите сделать более или менее заметной кнопку, у вас есть выбор:

Различные размеры кнопок

<button class="small button">Кнопка</button>

или

<button class="large button">Кнопка</button>

CSS

/* Маленький размер кнопок */
.button.small{
  padding: 4px 12px;
}
/* Большой размер кнопок */
.button.large{
  padding: 12px 30px;
  text-transform: uppercase;
}
.button.large:active{
  top: 2px;
}

Настраиваем различные цвета кнопок

Если вам нужны кнопки различных цветов, то просто добавьте класс color и название цвета, например, "color red":

Различные цвета кнопок

<button class="button">Кнопка</button>
<button class="color red button">Кнопка</button>
<button class="color green button">Кнопка</button>
<button class="color blue button">Кнопка</button>

CSS

.button.color{
  color: #fff;
  text-shadow: 0 1px 0 rgba(0,0,0,.2);
  background-image: linear-gradient(top, rgba(255,255,255,.3),
                                         rgba(255,255,255,0)),
                    url(data:image/png;base64,iVBORw0KGg[...]QmCC);
}
.button.green{
  background-color: #57a957;
  border-color: #57a957;
}
.button.green:hover{
  background-color: #62c462;
}
.button.green:active{
  background: #57a957;
}
.button.red{
  background-color: #c43c35;
  border-color: #c43c35;
}
.button.red:hover{
  background-color: #ee5f5b;
}
.button.red:active{
  background: #c43c35;
}
.button.blue{
  background-color: #269CE9;
  border-color: #269CE9;
}
.button.blue:hover{
  background-color: #70B9E8;
}
.button.blue:active{
  background: #269CE9;
}

Неактивное состояние

В некоторых случаях необходимо, чтобы кнопка была неактивной до тех пор пока не будут выполнены определенные действия, например, пока не будет заполнена форма регистрации кнопка "Зарегистрироваться" может быть не активной. Для этого вы можете добавить класс disabled:

Отключеное состояние

<button class="button" disabled>Кнопка</button>
<button class="color red button" disabled>Кнопка</button>
<button class="color green button" disabled>Кнопка</button>
<button class="color blue button" disabled>Кнопка</button>

CSS

.button[disabled], .button[disabled]:hover, .button[disabled]:active{
  border-color: #eaeaea;
  background: #fafafa;
  cursor: default;
  position: static;
  color: #999;
  /* Usually, !important should be avoided but here it's really needed :) */
  box-shadow: none !important;
  text-shadow: none !important;
}
.green[disabled], .green[disabled]:hover, .green[disabled]:active{
  border-color: #57A957;
  background: #57A957;
  color: #D2FFD2;
}
.red[disabled], .red[disabled]:hover, .red[disabled]:active{
  border-color: #C43C35;
  background: #C43C35;
  color: #FFD3D3;
}
.blue[disabled], .blue[disabled]:hover, .blue[disabled]:active{
  border-color: #269CE9;
  background: #269CE9;
  color: #93D5FF;
}

Группировка кнопок

В тех случаях, когда вам нужно сгруппировать похожие по функциональности кнопки, используйте следующий код:

Группировка кнопок

<ul class="button-group">
        <li><button class="button">Кнопка</button></li>
        <li><button class="button">Кнопка</button></li>
        <li><button class="button">Кнопка</button></li>
        <li><button class="button">Кнопка</button></li>
</ul>

CSS

.button-group,
.button-group li{
  display: inline-block;
  *display: inline;
  zoom: 1;
}
.button-group{
  font-size: 0; /* Inline block elements gap - fix */
  margin: 0;
  padding: 0;
  background: rgba(0, 0, 0, .04);
  border-bottom: 1px solid rgba(0, 0, 0, .07);
  padding: 7px;
  border-radius: 7px;
}
.button-group li{
  margin-right: -1px; /* Overlap each right button border */
}
.button-group .button{
  font-size: 13px; /* Set the font size, different from inherited 0 */
  border-radius: 0;
}
.button-group .button:active{
  box-shadow: 0 0 1px rgba(0, 0, 0, .2) inset,
              5px 0 5px -3px rgba(0, 0, 0, .2) inset,
              -5px 0 5px -3px rgba(0, 0, 0, .2) inset;  
}
.button-group li:first-child .button{
  border-radius: 3px 0 0 3px;
}
.button-group li:first-child .button:active{
  box-shadow: 0 0 1px rgba(0, 0, 0, .2) inset,
              -5px 0 5px -3px rgba(0, 0, 0, .2) inset;
}
.button-group li:last-child .button{
  border-radius: 0 3px 3px 0;
}
.button-group li:last-child .button:active{
  box-shadow: 0 0 1px rgba(0, 0, 0, .2) inset,
              5px 0 5px -3px rgba(0, 0, 0, .2) inset;
}

Совместимость с браузерами

CSS3-кнопки работают во всех современных браузерах.

Посмотреть демо

или скачайте архив с GitHub

Перевод статьи с http://www.red-team-design.com


Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

You have no rights to post comments