Как делать красивые css3 кнопки

Как делать красивые css3 кнопки

От автора: здравствуйте, уважаемые читатели блога webformyself. Сегодня я хотел бы с вами поделиться, как можно делать с помощью css3 кнопки для самых разных предназначений.

Возможности css3 для создания кнопок

Сразу скажу, что новая технология дает просто огромные возможности по стилизации кнопок. С ее помощью можно создавать удивительно красивые элементы. Давайте рассмотрим подробнее некоторые возможности.

Линейные и радиальные градиенты. Итак, это очень интересное обновление css3. Теперь при задании фона можно записывать не просто сплошной цвет, но и градиент, то есть микс из цветов. Недостаток этого свойства только в том, что оно не поддерживается в старых браузерах, а также самостоятельно не так уж и просто придумать и прописать градиент.

Но зато умные люди придумали такую замечательную вещь, как генератор градиента, где вы можете в визуальном режиме все настроить (в том числе и создать свои градиенты), а потом просто скопировать код и радоваться жизни.

Собственно, давайте применим в качестве фоне к кнопке радиальный градиент, а также несколько других интересных свойств.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Тип button создает просто пустую кнопку, которая сама по себе ничего не делает – ей нужно задавать какое-то действие через скрипты. Давайте ее оформим:

Стилей записали много, давайте разбираться. Во-первых, тут мы видим тот самый радиальный градиент. Код я сгенерировал вот в этом генераторе. Добавляем также неболое размытие тени, убираем стандартную рамку, которая ставится кнопке по умолчанию, задаем отступы, цвет текста, скругление углов и размер шрифта.

В общем-то, все это стандартные свойства. Border-radius, box-shadow и радиальный градиент являются частью спецификации CSS3. По сути, эти элементы и формируют внешний вид кнопки, без них она выглядела бы далеко не так эффектно.

Давайте всего лишь немного изменим тень:

Теперь она приобрела трехмерность.

Есть две проблемы, которые возникают с подобного вида кнопками. Во-первых, при наведении на них курсор не меняется, а должен бы, чтобы пользователь четко видел, что они кликабельны. Во-вторых, при клике появляется синяя квадратная рамка. Эти две проблемы легко убрать добавлением следующих свойств:

Это вставить в обычные стили кнопки.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

А здесь псевдокласс :focus применит стиль только тогда, когда элемент получает фокус, то есть по ней кликают. Все, теперь никаких проблем нет.

Кнопка с линейные градиентом и трансформации

Теперь давайте сделаем вторую с немного другим оттенком. Все стили для нее я применил такие же, изменился только фон и тень:

Чтобы не загромождать код, я пренебрег в данном случае кроссбраузерностью. Дело в том, что генератор создает несколько вариантов кода, которые позволяют реализовать поддержку или хотя бы нормальное отображения в старых браузерах. Тот код градиентов, что вставлял я в обоих случаях, сработает только в относительно новых веб-обозревателях.

Генератор также подскажет вам, с каких версий будет работать тот или иной код. Кстати,с точки зрения стандартов W3C мы записали градиент абсолютно правильно.

Для старых старых браузеров есть смысл прописать что-то в этом духе.

Никакого градиента, разумеется, не будет, зато это близкий к нему оттенок, и кнопочка останется в старых браузерах цветной, пусть и не такой красивой.

С помощью трансформаций можно проделать дополнительные манипуляции с кнопкой. Например, увеличить, повернуть или скривить ее.

Такой код скривит элемент на 20 градусов против часовой стрелки и на 10 повернет. Увеличением обычно пользуются при наведении на кнопку, при этом, чтобы трансформация не происходила резко, добавляют плавные переходы.

Опять же, предупреждаю вас, что для кроссбраузерности практически ко всем свойствам css3 нужно добавлять вендорные префиксы типа –moz, -webkit и других.

А что, если вам нужно наклонить не саму кнопку, а только текст в ней? Что ж, для этой цели заключите нужные слова в тег span, дайте ему какой-нибудь стилевой класс и запишите поворот через стили именно для него. Таким образом, вы добьетесь нужного эффекта. То же самое касается и увеличения, перемещения и всего остального.

Итог

Как вы понимаете, основное оружие при создании красивых кнопок – это градиенты, тени, трансформации и закругление углов. В сочетании и при умелом использовании с помощью этих свойств можно создавать сотни кнопок под самые разные дизайны.

Если вы хотите умело научиться пользоваться этими новыми свойствами, то вам прямая дорога к нашему премиум-курсу по CSS3. Там вы еще лучше сможете разобраться с градиентами, научиться добавлять тень, делать кнопки полупрозрачными и применять к ним различные эффекты при наведении курсора. На этом я прощаюсь с вами и желаю поскорее применить все это на практике.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree