Очередная статья из цикла CSS3 для начинающих. Речь сегодня пойдет о кнопках. Мы привыкли, что кнопка — это набор картинок. Первая картинка создается для кнопки в спокойном состоянии, вторая для состояния когда курсор мыши наведен на кнопку и третья — при нажатии на кнопку. Таким образом для каждой кнопки приходиться рисовать 3 картинки. С развитием и внедрением CSS3 мы можем избавиться от всего этого и делать кнопки легко и непринужденно, используя только стили CSS. Сегодня мы займемся созданием простых кнопок разного размера и цвета.
Цель
Наша цель создать кнопки, которые будут в одно и тоже время и кроссбраузерными, и будут нормально функционировать в браузерах без поддержки CSS3. Так же наши кнопки будут масштабируемыми, что означает возможность использования разных размеров и цветов.
Стили кнопки
Это стандартный стиль для всех кнопок нашего сайта. Мы можем кастомизировать кнопки путем добавления цепочек CSS классов, таким образом меняя цвет и размер кнопок. Так же мы будем использовать изображением под названием overlay.png, которое нужно нам для нормального отображения градиентной заливки для браузера IE6.
Мы так же будем использовать RGBA модель задания цвета. Это та же самая модель RGB только с добавлением прозрачного стиля, который позволяет задать прозрачность цвета. Это даст нам возможность создать ощущение выпуклости кнопки за счет теней.
.button, .button:visited {
background: #222 url(overlay.png) repeat-x;
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor: pointer
}
Размер кнопки
Теперь мы можем создать дополнительные классы, чтобы задать размеры кнопкам. Создадим несколько разных размеров: .small .medium .large и .super. Как вы увидите из кода мы меняем всего два параметра — размер шрифта и отступ от края (padding).
.small.button, .small.button:visited
{ font-size: 11px}
.button, .button:visited, .medium.button, .medium.button:visited
{
font-size: 13px;
font-weight: bold;
line-height: 1;
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
}
.large.button, .large.button:visited
{
font-size: 14px;
padding: 8px 14px 9px;
}
.super.button, .super.button:visited
{
font-size: 34px;
padding: 8px 14px 9px;
}
Цвет кнопки
Заключительным действием будет задание CSS классов для тех цветов, которые мы будем использовать для наших кнопок. Ниже я приведу часть готовых цветовых схем, но вы можете с легкостью добавить любые цвета, которые вам больше по душе.
.pink.button, .magenta.button:visited { background-color: #e22092; }
.pink.button:hover { background-color: #c81e82; }
.green.button, .green.button:visited { background-color: #91bd09; }
.green.button:hover { background-color: #749a02; }
.red.button, .red.button:visited { background-color: #e62727; }
.red.button:hover { background-color: #cf2525; }
.orange.button, .orange.button:visited { background-color: #ff5c00; }
.orange.button:hover { background-color: #d45500; }
.blue.button, .blue.button:visited { background-color: #2981e4; }
.blue.button:hover { background-color: #2575cf; }
.yellow.button, .yellow.button:visited { background-color: #ffb515; }
.yellow.button:hover { background-color: #fc9200; }
Посмотреть демо
В следующей статье из цикла статей CSS3 для начинающих мы займемся созданием трехмерных кнопок.
Изящное решение!