Блог студии веб-дизайна «Make a Site» Дизайн, верстка, программирование, наполнение и раскрутка сайтов.

Красивые CSS кнопки для сайта без изображений

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

Красивые CSS кнопки для сайта без изображений


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

При проектировании дизайна сайта необходимо предусмотреть внешний вид кнопок — это довольно важно и играет большую роль в восприятии пользовательского интерфейса. Сейчас сложно себе представить сайт, на котором бы не было ни одной кнопки. CSS кнопки могут использоваться в формах поиска, авторизации, обратной связи, корзине товаров и т. д. Стоит заметить, что не помешает сделать несколько стилей кнопок для сайта — какие-то более яркие (для ключевых моментов — например, «Купить», «Заказать», «Отправить» и т.д.), какие-то черно-белые (обычно отмена действий, очистка данных форм — например, «Очистить», «Отменить», «Назад» и т. д.). Также не помешает сделать кнопки разных размеров — для контентной области сайта можно использовать кнопки побольше, а для сайдбаров, выпадающих окон и других вспомогательных элементов шаблона можно использовать их меньших братьев — кнопки с такими же стилями, но немного масштабированные.

Итак, давайте приступим к составлению стилей красивой CSS кнопки на простом примере. Это будет своего рода пошаговая инструкция, где мы постепенно будем добавлять по одному стилю к нашей кнопке, сразу показывать результат этого действия и пояснять свои действия комментариями.

Для начала нам нужно придумать класс, которым мы будем называть наши замечательные кнопки. Например, cool-css-button — классная CSS кнопка 🙂 В разметке мы будем использовать тег a. Никаких submit или button мы использоваться не будем, потому что они могут неправильно отображаться на мобильных устройствах (мобильные браузеры практически игнорируют весь CSS кнопок и делают их такими, как им вздумается). Поэтому все кнопки будут в виде обычной универсальной ссылки с необходимыми нам CSS свойствами.

Поехали!

.cool-css-button {

}

Красивая CSS кнопка для сайта

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

.cool-css-button {
	background: #2fc7f7;
}

Красивая CSS кнопка для сайта

Кстати, вместо background-color, мы используем сокращенную запись CSS свойства background, просто потому что так удобней.

Теперь нужно сделать так, чтобы наша с вами кнопка имела свойства блочного элемента, тогда мы сможем задавать все необходимые нам CSS свойства, которые не доступны для встроенных элементов. Тег a по умолчанию, как и текст имеет свойство display: inline;, поэтому мы сразу же его переопределяем. Но мы не будем ставить display: block;, по той причине, что нам не нужно, чтобы кнопка автоматически растягивалась на всю ширину родительского элемента, что свойственно элементам, обладающим исключительно блочным свойством.

.cool-css-button {
	background: #2fc7f7;
	display: inline-block;
}

Красивая CSS кнопка для сайта

Теперь сделаем так, чтобы в непредвиденных ситуациях, когда ширина кнопки будет слишком большой, а текст в ней будет состоять из нескольких слов с теоретически возможным переносом, чтобы переноса строки не произошло, добавив свойство white-space: nowrap;.

.cool-css-button {
	background: #2fc7f7;
	display: inline-block;
	white-space: nowrap;
}

Красивая CSS кнопка для сайта

По умолчанию, все ссылки отображаются подчеркнутыми, но у нас то с вами кнопка, а не просто текстовая ссылка, поэтому отключаем это свойство, называемое «украшением текста» text-decoration.

.cool-css-button {
	background: #2fc7f7;
	display: inline-block;
	white-space: nowrap;
	text-decoration: none;
}

Красивая CSS кнопка для сайта

Для установки высоты нашей CSS кнопки можно пойти двумя путями. Первый — не указывать явную высоту, а указать отступ сверху и снизу, например, padding: 10px 0;. В таком случае текст кнопки никогда не будет прилипать к верхней и нижней границе текста и не нужно придумывать высоту кнопки, можно просто регулировать ее, уменьшая или увеличивая отступы. Однако тут есть один небольшой минус (если это можно назвать минусом) — при постоянной величине отступа сверху и снизу, в зависимости от разных размеров текста, используемого в кнопке, будет меняться ее высота. Если макет дизайна требует конкретного фиксированного значения высоты кнопки, тогда нужно воспользоваться вторым способом — указать явную высоту кнопки, но тогда как выровнять текст по вертикали внутри кнопки? Все очень просто — мы зададим высоту строки текста, равную высоте самой кнопки (в типографике это свойство называется интерлиньяж) и текст встанет ровно посередине вертикальной оси нашей замечательной кнопки.

.cool-css-button {
	background: #2fc7f7;
	display: inline-block;
	white-space: nowrap;
	text-decoration: none;
	height: 35px;
	line-height: 35px;
}

Красивая CSS кнопка для сайта

Теперь нам нужно, чтобы текст, отображаемый на кнопке контрастировал с ее фоном. Тут все просто — если фон темный, то текст светлый и наоборот.

.cool-css-button {
	background: #2fc7f7;
	display: inline-block;
	white-space: nowrap;
	text-decoration: none;
	height: 35px;
	line-height: 35px;
	color: #fff;
}

Красивая CSS кнопка для сайта

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

.cool-css-button {
	background: #2fc7f7;
	display: inline-block;
	white-space: nowrap;
	text-decoration: none;
	height: 35px;
	line-height: 35px;
	color: #fff;
	padding: 0 25px;
}

Красивая CSS кнопка для сайта

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

Теперь не помешает немного закруглить углы и для этого отлично подойдет свойство border-radius. Кстати, оно работает даже тогда, когда границы у слоя как таковой и нет.

.cool-css-button {
	background: #2fc7f7;
	display: inline-block;
	white-space: nowrap;
	text-decoration: none;
	height: 35px;
	line-height: 35px;
	color: #fff;
	padding: 0 25px;
	border-radius: 4px;
}

Красивая CSS кнопка для сайта

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

.cool-css-button {
	background: #2fc7f7;
	display: inline-block;
	white-space: nowrap;
	text-decoration: none;
	height: 35px;
	line-height: 35px;
	color: #fff;
	padding: 0 25px;
	border-radius: 4px;
	box-shadow: inset 0 -15px 15px 0 #1ca9d5;
}

Красивая CSS кнопка для сайта

Также через запятую укажем небольшую внешнюю тень.

.cool-css-button {
	background: #2fc7f7;
	display: inline-block;
	white-space: nowrap;
	text-decoration: none;
	height: 35px;
	line-height: 35px;
	color: #fff;
	padding: 0 25px;
	border-radius: 4px;
	box-shadow: inset 0 -15px 15px 0 #1ca9d5, 0 1px 3px 0 rgba(0, 0, 0, 0.5);
}

Красивая CSS кнопка для сайта

И небольшую рамку.

.cool-css-button {
	background: #2fc7f7;
	display: inline-block;
	white-space: nowrap;
	text-decoration: none;
	height: 35px;
	line-height: 35px;
	color: #fff;
	padding: 0 25px;
	border-radius: 4px;
	box-shadow: inset 0 -15px 15px 0 #1ca9d5, 0 1px 3px 0 rgba(0, 0, 0, 0.5);
	border: #20b1df 1px solid;
}

Не забудьте, что рамка не входит в высоту элемента, указанную свойством height прибавляется к общей величине. Таким образом, высота изменилась с 35 до 37 пикселей (добавилось по пикселю сверху и снизу).

Красивая CSS кнопка для сайта

Шрифт и стиль текста вы можете настроить сами, тут все зависит от ваших предпочтений, также можно изменять стили кнопки при наведении на нее курсора мышки, для чего нужно просто прописать CSS свойства для псевдокласса hover.

.cool-css-button:hover {
	background: #55d5fd;
	box-shadow: none;
}

Псевдокласс active отвечает за стиль элемента при клике по нему левой кнопкой мышки.

.cool-css-button:active {
	background: #2fc7f7;
	box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.5);
}

И вот что у нас получилось в итоге (попробуйте навести мышку и кликнуть левой кнопкой):

Красивая CSS кнопка для сайта

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


Предыдущая статья:
Продвижение сайта ссылками

Читайте также:
Способы защиты от повторной отправки формы при перезагрузке страницы


Блог студии веб-дизайна «Make a Site».
Дизайн, верстка, программирование, наполнение и раскрутка сайтов.

Текущий проект: «Stream Booster» — раскрутка Twitch и YouTube каналов

Студия веб-дизайна «Make a site»