Кнопка будет сделана, опираясь на традиционный стиль, используя нежные градации и внешние линии, которые будут придавать впечатление закругления, в итоге мы получим трехмерный элемент, который так и ждет, пока на него нажмут. Мы сделаем три варианта объекта: нормальное состояние, нажатая кнопка, и кнопка при наведении, что придаст нашей кнопке некоторую реалистичность и ощущение того, будто бы кнопка нажимается в реальной жизни.
Давайте начнем работу в Photoshop, выберите «Rounded Rectange Tool», введите большое значение в радиус и перетащите фигуру на холст.
Кликните два раза по слою, чтобы открыть свойства слоя. Первым делом мы добавим наложение градации (Gradient Overlay). Установите цвета вертикальной градации от #a8a8a8 до #ffffff.
Теперь, давайте добавим окантовку (stroke). Установите линию 5 пикселей и цвета #cbcbcb.
Для добавления внутренней линии используйте внутреннее свечение (Inner Glow), но измените настройки на Normal / #c2c2c2 / 100% Choke / и 3px ширины.
Впишите текст в кнопку и выберите подходящий шрифт. Выровняйте текст по центру изображения картинки.
Откройте свойства стиля с текстом и добавьте наложение градации от #9a9a9a к #7c7c7c.
Для придания тексту некоторого эффекта гравировки, добавьте внутреннюю тень (Inner Shadow). Понизьте уровень видимости эффекта до 21% , поменяйте расстояние на 2px, и установите 3px объема.
В дополнение, нежно подчеркните текст посредством добавлением тени со значениями Normal / #ffffff / 33% видимости / 2px расстояния и 1px объема.
Выделите слои текста и кнопки, и, удерживая ALT, перетащите их на иконку дублирования. Выровняйте дубликаты по нижнему краю оригинала. Поменяйте цвет окантовки дубликата на более темный.
Сделайте еще один дубликат, и в этот раз отредактируйте градацию – инвертируйте направление. Таким образом, можно создать иллюзию нажатой кнопки.
Теперь у нас есть 3 готовых положения кнопки. В каждом дубликате есть незначительные отличия, что будет способствовать видоизменению кнопки, поле того, как мы пропишем кое-какой код CSS.
Создайте выделение вокруг кнопок, спрячьте фон и сохраните для дальнейшего использования в Web. Выберите формат PNG24 для того, чтобы можно было оставить прозрачный фон.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Button</title>
<style type="text/css">
* { margin: 0; padding: 0; /* Quick and Dirty Reset */ }
body {
background: url(bg-repeat.png);
}
#demo {
width: 433px; margin: 100px auto;
}
</style>
</head>
<body>
<div id="demo">
</div>
</body>
</html>
Открывайте свой текстовый редактор и создайте простой файл XHTML.
<p><a href="#" class="press-it-btn">Press it</a></p>
Напишите код для кнопки. Мы будем использовать простой анкор, который мы использовали при создании кнопки (напр: «Нажмите» - Press it). Мы встроим этот элемент в блок, и зададим ему класс, с помощью которого мы сможем ссылаться на него посредством нашего CSS.
#demo p a.press-it-btn {
display: block;
width: 433px; height: 174px;
background-image: url(button-sprite.png);
background-position: top;
text-indent: -9999px;
}
Теперь давайте пропишем нужный CSS-код. Прежде всего, нам надо изменить анкор с его стандартного положения встроенного элемента в блочное. Позже это даст нам возможность указывать высоту и ширину. Но учите, что нужно указывать высоту конкретно каждой кнопки, а не всего документа в целом. Позже мы сможет прикрепить фоновое изображение для анкора и выровнять его к верхней части. Для завершения кнопки используйте параметр text-indent для того чтобы сместить сгенерированный HTML за пределы экрана.
#demo p a.press-it-btn:hover {
background-position: center;
}
#demo p a.press-it-btn:active {
background-position: bottom;
}
Вместе с кнопкой, к анкору можно применить и псевдо-классы. Измените положение фонового изображения к центру при наведении, а для активного положения сместите фоновое изображение к нижнему краю. Это будет менять внешний вид кнопки, когда пользователь будет наводить на кнопку или кликать по ней. Проверьте сами в браузере.
a { outline: none; }
Что же это!? Какая-то точечная линия вокруг кнопки при нажатии? Иногда случается так, что браузеры добавляют собственные варианты оформления, которые могут подпортить внешний вид нашей задумки. Это можно легко исправить посредством отключения параметра outline. Вообще, нежелательно оставлять активным данный параметр, поэтому не пропустите следующий этап!
#demo p a.press-it-btn:hover, #demo p a.press-it-btn:focus
Так как мы только что убрали outline, отключилась и навигация посредством клавиатуры. Мы можем добавить наше собственное подсвечивание посредством добавления псевдо-классов CSS. Например, мы может оформить нашу кнопку так, как будто на нее навели курсор.
Скачать демо с нашего сайта
Внимание! У вас нет прав для просмотра скрытого текста.