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

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

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

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

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

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

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

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

<input type = "button" value = "Кнопка" id = "button1">

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

#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. По сути, эти элементы и формируют внешний вид кнопки, без них она выглядела бы далеко не так эффектно.

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

box-shadow: 0 10px 5px 0 blue;

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

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

cursor: pointer;

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

#button1:focus{
	outline: none;
}

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

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

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

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 мы записали градиент абсолютно правильно.

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

background: rgb(179,220,237);

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

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

transform: skew(-20deg) rotate(-10deg)

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

#button2{
	transition: 1s; 
}
#button2:hover{
	transform: scale(1.5);
}

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

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

Итог

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

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

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

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

Получить

Метки:

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree