Шаблоны CSS3-кнопок
В данной статье вы узнаете, как создать симпатичные кнопки при помощи CSS3, и вы легко можете использовать их на своих сайтах, добавив соответствующие классы для кнопок или ссылок.
Возможности шаблонов CSS3-кнопкок
- Простота в использовании.
- Включает в себя хак для переходов градиентов.
- Ни одного изображения не используется.
Кнопки
В принципе, для создания кнопки все что вам нужно сделать, это вставить следующий код:
<ahref=""class="button">Кнопка</a>
или
<buttonclass="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;
}
Настраиваем различные размеры кнопок
Если вы хотите сделать более или менее заметной кнопку, у вас есть выбор:
<buttonclass="small button">Кнопка</button>
или
<buttonclass="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> <buttonclass="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> <buttonclass="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
