От автора: здравствуйте, уважаемые читатели блога webformyself. Сегодня я хотел бы с вами поделиться, как можно делать с помощью css3 кнопки для самых разных предназначений.
Возможности css3 для создания кнопок
Сразу скажу, что новая технология дает просто огромные возможности по стилизации кнопок. С ее помощью можно создавать удивительно красивые элементы. Давайте рассмотрим подробнее некоторые возможности.
Линейные и радиальные градиенты. Итак, это очень интересное обновление css3. Теперь при задании фона можно записывать не просто сплошной цвет, но и градиент, то есть микс из цветов. Недостаток этого свойства только в том, что оно не поддерживается в старых браузерах, а также самостоятельно не так уж и просто придумать и прописать градиент.
Но зато умные люди придумали такую замечательную вещь, как генератор градиента, где вы можете в визуальном режиме все настроить (в том числе и создать свои градиенты), а потом просто скопировать код и радоваться жизни.
Собственно, давайте применим в качестве фоне к кнопке радиальный градиент, а также несколько других интересных свойств.
1 |
<input type = "button" value = "Кнопка" id = "button1"> |
Тип button создает просто пустую кнопку, которая сама по себе ничего не делает – ей нужно задавать какое-то действие через скрипты. Давайте ее оформим:
1 2 3 4 5 6 7 8 9 |
#button1{ background: radial-gradient(ellipse at center, rgba(240,249,255,1) 0%,rgba(203,235,255,1) 47%,rgba(161,219,255,1) 100%); box-shadow: 0 0 5px 0 blue; border: none; padding: 30px; color: #333; border-radius: 30px; font-size: 20px; } |
Стилей записали много, давайте разбираться. Во-первых, тут мы видим тот самый радиальный градиент. Код я сгенерировал вот в этом генераторе. Добавляем также неболое размытие тени, убираем стандартную рамку, которая ставится кнопке по умолчанию, задаем отступы, цвет текста, скругление углов и размер шрифта.
В общем-то, все это стандартные свойства. Border-radius, box-shadow и радиальный градиент являются частью спецификации CSS3. По сути, эти элементы и формируют внешний вид кнопки, без них она выглядела бы далеко не так эффектно.
Давайте всего лишь немного изменим тень:
1 |
box-shadow: 0 10px 5px 0 blue; |
Теперь она приобрела трехмерность.
Есть две проблемы, которые возникают с подобного вида кнопками. Во-первых, при наведении на них курсор не меняется, а должен бы, чтобы пользователь четко видел, что они кликабельны. Во-вторых, при клике появляется синяя квадратная рамка. Эти две проблемы легко убрать добавлением следующих свойств:
1 |
cursor: pointer; |
Это вставить в обычные стили кнопки.
1 2 3 |
#button1:focus{ outline: none; } |
А здесь псевдокласс :focus применит стиль только тогда, когда элемент получает фокус, то есть по ней кликают. Все, теперь никаких проблем нет.
Кнопка с линейные градиентом и трансформации
Теперь давайте сделаем вторую с немного другим оттенком. Все стили для нее я применил такие же, изменился только фон и тень:
1 2 |
background: linear-gradient(to right, rgba(179,220,237,1) 0%,rgba(41,184,229,1) 50%,rgba(188,224,238,1) 100%); box-shadow: 5px 2px 0 0 grey; |
Чтобы не загромождать код, я пренебрег в данном случае кроссбраузерностью. Дело в том, что генератор создает несколько вариантов кода, которые позволяют реализовать поддержку или хотя бы нормальное отображения в старых браузерах. Тот код градиентов, что вставлял я в обоих случаях, сработает только в относительно новых веб-обозревателях.
Генератор также подскажет вам, с каких версий будет работать тот или иной код. Кстати,с точки зрения стандартов W3C мы записали градиент абсолютно правильно.
Для старых старых браузеров есть смысл прописать что-то в этом духе.
1 |
background: rgb(179,220,237); |
Никакого градиента, разумеется, не будет, зато это близкий к нему оттенок, и кнопочка останется в старых браузерах цветной, пусть и не такой красивой.
С помощью трансформаций можно проделать дополнительные манипуляции с кнопкой. Например, увеличить, повернуть или скривить ее.
1 |
transform: skew(-20deg) rotate(-10deg) |
Такой код скривит элемент на 20 градусов против часовой стрелки и на 10 повернет. Увеличением обычно пользуются при наведении на кнопку, при этом, чтобы трансформация не происходила резко, добавляют плавные переходы.
1 2 3 4 5 6 |
#button2{ transition: 1s; } #button2:hover{ transform: scale(1.5); } |
Опять же, предупреждаю вас, что для кроссбраузерности практически ко всем свойствам css3 нужно добавлять вендорные префиксы типа –moz, -webkit и других.
А что, если вам нужно наклонить не саму кнопку, а только текст в ней? Что ж, для этой цели заключите нужные слова в тег span, дайте ему какой-нибудь стилевой класс и запишите поворот через стили именно для него. Таким образом, вы добьетесь нужного эффекта. То же самое касается и увеличения, перемещения и всего остального.
Итог
Как вы понимаете, основное оружие при создании красивых кнопок – это градиенты, тени, трансформации и закругление углов. В сочетании и при умелом использовании с помощью этих свойств можно создавать сотни кнопок под самые разные дизайны.
Если вы хотите умело научиться пользоваться этими новыми свойствами, то вам прямая дорога к нашему премиум-курсу по CSS3. Там вы еще лучше сможете разобраться с градиентами, научиться добавлять тень, делать кнопки полупрозрачными и применять к ним различные эффекты при наведении курсора. На этом я прощаюсь с вами и желаю поскорее применить все это на практике.