Создаем красивые кнопки для сайта на CSS3 (с градиентами)
Каждый веб-мастер давно наслышан, а кто-то уже виртуозно применяет на практике новые уникальные возможности CSS3. Не так давно мы разбирали несколько интересных текстовых эффектов, на этот раз речь пойдет о градиентных кнопках, созданных без использования графики (картинок), то есть, только средствами CSS3. Сам туториал я обнаружил здесь, вам же предлагаю перевод.
Итак основные качества будущей кнопки (кнопок):
- Масштабируемость (в зависимости от размера шрифта и количества текста);
- Функциональность, юзабилити (предусмотрены состояния кнопки — hover эффект при наведении, а также normal и active)
- Обратная совместимость (даже на старом или не совместимом браузере кнопки будут выглядеть прилично, хотя конечно не так как задумывалось. В этом можно будет убедиться в конце публикации);
- Гибкость (эти стили можно применять и к другим элементам, не обязательно для кнопок);
Какие фишки будем использовать в процессе созднаия кнопок? Результат достигается за счет градиентов, свойств box shadow, text shadow, rounded corners, режима RGBA.
Структура HTML
<a href="#" class="button button-blue">
<span>Button</span>
</a> |
CSS
.button { margin: 10px; text-decoration: none; font: bold 1.5em 'Trebuchet MS',Arial, Helvetica; /*Change the em value to scale the button*/ display: inline-block; text-align: center; color: #fff; border: 1px solid #9c9c9c; /* Fallback style */ border: 1px solid rgba(0, 0, 0, 0.3); text-shadow: 0 1px 0 rgba(0,0,0,0.4); box-shadow: 0 0 .05em rgba(0,0,0,0.4); -moz-box-shadow: 0 0 .05em rgba(0,0,0,0.4); -webkit-box-shadow: 0 0 .05em rgba(0,0,0,0.4); } .button, .button span { -moz-border-radius: .3em; border-radius: .3em; } .button span { border-top: 1px solid #fff; /* Fallback style */ border-top: 1px solid rgba(255, 255, 255, 0.5); display: block; padding: 0.5em 2.5em; /* The background pattern */ background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(0, 0, 0, 0.05)), color-stop(.25, transparent), to(transparent)), -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(0, 0, 0, 0.05)), color-stop(.25, transparent), to(transparent)), -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, rgba(0, 0, 0, 0.05))), -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, rgba(0, 0, 0, 0.05))); background-image: -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent), -moz-linear-gradient(-45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent), -moz-linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%), -moz-linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%); /* Pattern settings */ -moz-background-size: 3px 3px; -webkit-background-size: 3px 3px; } .button:hover { box-shadow: 0 0 .1em rgba(0,0,0,0.4); -moz-box-shadow: 0 0 .1em rgba(0,0,0,0.4); -webkit-box-shadow: 0 0 .1em rgba(0,0,0,0.4); } .button:active { /* When pressed, move it down 1px */ position: relative; top: 1px; } |
Синяя кнопка
.button-blue
{
background: #4477a1;
background: -webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1) );
background: -moz-linear-gradient(-90deg, #81a8cb, #4477a1);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');
}
.button-blue:hover
{
background: #81a8cb;
background: -webkit-gradient(linear, left top, left bottom, from(#4477a1), to(#81a8cb) );
background: -moz-linear-gradient(-90deg, #4477a1, #81a8cb);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4477a1', endColorstr='#81a8cb');
}
.button-blue:active
{
background: #4477a1;
} |
Совместимость с разными браузерами
- Mozilla 3.6 и старше — полная совместимость, кнопки отображаются именно так как они задуманы со всеми деталями.
- Google Chrome, Safari (Webkit) — проблем не выявлено, в целом результат не хуже чем на Mozilla.
- Opera 11 — в оригинальном примере градиент не отображается вовсе, хорошо хотя бы, что закругленные углы интерпретируются так как нужно. В комментариях подсказывают, что нужно добавлять -o-linear-gradient свойство.
- Internet Explorer 6-8 — В данном случае проблема, наоборот, с закругленными углами. Градиент присутствует.
- Internet Explorer 9 — ситуация несколько лучше чем у браузеров от Microsoft прошлых поколений, но все равно результат не столь хорош, как у Mozilla или Chrome.
Ну, а у меня на этом все. Теперь у вас есть возможность выбрать использовать градиенты для фотошопа или обходиться исключительно с помощью CSS. Изучайте возможность CSS3, оно того стоит! С HTML5 так вообще чудесам можно творить, недавно нашел подборку разных техник и был сильно приятно шокировал делом примерами.
P.S. Постовой. Интернет магазин Линзмастер предлагает купить цветные и обычные контактные линзы по хорошим ценам и с доставкой по Украине.
(5 оценок, среднее: 6,60 из 7)
Загрузка...
Не хватает примеров, как они выглядят… Тестить самому крайне лениво. :)
Anton, добавил ссылку на демо страницу.
Что то в Mozilla Firefox 3.6.15 кнопочки ужасно тормозят
Evgeniy, да, тоже заметил, странная реакция, может быть пофиксят в следующих версиях фф.
ruvisio.ru/9-gradientnyh-css-knopok/ — здесь пример кнопок, на Хроме кстати тормозов вообще нет.
Для Opera можно запихнуть SVG с градиентом в data: URI, работать будет хоть в девятой. А ещё я вот такой сервис сделал: http://webgradients.appspot.com — можно поставить Modernizr и прописать типа .no-cssgradients button. Но надо знать примерную высоту тогда.
Жалко что нет разборки стилей — было бы интересно изучить создание таких кнопок с нуля.
-o-linear-gradient
для оперы