Создание градиентных кнопок с использованием CSS3
25 ноября 2014 | Опубликовано в css | 2 Комментариев »
В этом уроке мы покажем, как использовать работающее во всех браузерах свойство градиентов CSS. Посмотрите пример, чтобы увидеть набор градиентных кнопок, созданный с использованием чистого CSS, без изображений или Javascript. Кнопки меняют размер, в зависимости от размера шрифта. Размер кнопок также можно изменять, меняя значения внутреннего отступа и размера шрифта. И этот способ может быть применен к любому элементу HTML, такому как блок, тег span, текст, ссылка, кнопка, поле ввода и т. п.
Что особенного в этих кнопках?
- Чистый CSS: не используются изображения или Javascript.
- Градиент поддерживается большинством браузеров, включая старые версии: Internet Explorer, Firefox от версии 3.6, Chrome и Safari.
- Гибкость и масштабируемость: размер кнопки и закругление углов можно поменять, изменяя значение размера шрифта и внешних отступов.
- Есть три состояния кнопок: обычное, при наведении указателя мыши и активное.
- Может применяться к любому элементу HTML: ссылке, полю ввода, кнопке, тегу span, блоку, тексту, тегу h3 и т. п.
- Обходной путь: если CSS3 не поддерживается, будет показана простая кнопка, без градиентов и теней.
Предварительный просмотр
Изображение ниже показывает, как будет выглядеть кнопка в разных браузерах.
Состояния кнопки
- Обычное состояние — градиент с границей и стилями теней.
- При наведении указателя мыши — более темный градиент.
- Активное — градиент перевернут, кнопка сдвинута на 1px вниз и также более темный шрифт.
Общие стили кнопки
Следующий код — общие стили для класса .button. Мы использовали единицы em для значений свойств внутреннего отступа и скругления границы, чтобы кнопка меняла размер при изменении размера шрифта. Чтобы изменить закругление углов и размер кнопки, просто измените значение свойств border-radius, font-size и padding. Например, мы можем сделать маленькую кнопку, уменьшив размер шрифта и значение внутреннего отступа, посмотрите пример.
.button { display: inline-block; outline: none; cursor: pointer; text-align: center; text-decoration: none; font: 14px/100% Arial, Helvetica, sans-serif; padding: .5em 2em .55em; text-shadow: 0 1px 1px rgba(0,0,0,.3); -webkit-border-radius: .5em; -moz-border-radius: .5em; border-radius: .5em; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2); } .button:hover { text-decoration: none; } .button:active { position: relative; top: 1px; }
Стили цветового градиента
Код ниже — это стили CSS для оранжевой кнопки. Первая строка, содержащая свойство фона, — это обходной путь для браузеров, не поддерживающих CSS3, вторая строка — для браузеров на движке Webkit, третья — для браузера Firefox и последняя — фильтр градиента для браузера Internet Explorer.
.orange { color: #fef4e9; border: solid 1px #da7c0c; background: #f78d1d; background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20)); background: -moz-linear-gradient(top, #faa51a, #f47a20); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20'); } .orange:hover { background: #f47c20; background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015)); background: -moz-linear-gradient(top, #f88e11, #f06015); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015'); } .orange:active { color: #fcd3a5; background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a)); background: -moz-linear-gradient(top, #f47a20, #faa51a); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a'); }
Как можно использовать эти кнопки?
Допустим, вам понравилась синяя кнопка, и вы хотели бы использовать ее в своем проекте. Для этого вам нужно:
- Сначала скопировать свойства CSS для классов .button и .blue из примера исходного кода.
- После этого добавить к элементу HTML, который вы хотите сделать кнопкой, например, <a href="#">Button</a>. Классы CSS могут быть применены к любым элементам, таким как ссылка, текст, тег span, блок, поле ввода, кнопка и т.д.
Автор урока Nick La
Перевод — Дежурка
Смотрите также:
Комментарии
Похожие статьи
- Использование множественных фоновых изображений CSS: основы
- Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
- Использование плавной прокрутки и ее недостатки
- Использование тега span для разделения слов в ссылках в CSS
- Использование порядка расположения множественных фоновых изображений
10 декабря 2017 в 14:20
Нихера не понял =-O