2014
16
Окт

Создание кнопок для сайта



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

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


Если хотите увидеть, как выглядят кнопки достаточно нажать на кнопку «Демонстрация». Нажав на кнопку «Исходники» вы сможете скачать для кнопок стили CSS и страницу HTML.


HTML страница


Мини кнопки

<button type="button" class="btn btn-hot btn-xs">Кнопка 1</button> <button type="button" class="btn btn-sunny btn-xs">Кнопка 2</button> <button type="button" class="btn btn-fresh btn-xs">Кнопка 3</button> <button type="button" class="btn btn-sky btn-xs">Кнопка 4</button>

Маленькие кнопки

<button type="button" class="btn btn-hot btn-sm">Кнопка 1</button> <button type="button" class="btn btn-sunny btn-sm">Кнопка 2</button> <button type="button" class="btn btn-fresh btn-sm">Кнопка 3</button> <button type="button" class="btn btn-sky btn-sm">Кнопка 4</button>

Стандартные кнопки

<button type="button" class="btn btn-hot btn-md">Кнопка 1</button> <button type="button" class="btn btn-sunny btn-md">Кнопка 2</button> <button type="button" class="btn btn-fresh btn-md">Кнопка 3</button> <button type="button" class="btn btn-sky btn-md">Кнопка 4</button>

Большие кнопки

<button type="button" class="btn btn-hot btn-lg">Кнопка 1</button> <button type="button" class="btn btn-sunny btn-lg">Кнопка 2</button> <button type="button" class="btn btn-fresh btn-lg">Кнопка 3</button> <button type="button" class="btn btn-sky btn-lg">Кнопка 4</button>

Используем, тег <button> и прописываем для него определенные классы, которые определят необходимые параметры и свойства для кнопок. Базовый стиль: btn, соответствующий цвет : btn-hot btn-sunny btn-sunny и btn-sky , размер: btn-xs - для самых маленьких кнопок, btn-sm - для кнопок побольше, стандартные кнопки - btn-md, и для больших кнопок - btn-lg.

За базовые стили всех кнопок выбираем класс - btn. Для этого класса задаем нужный цвет, размер кнопок, а с помощью <button> прописываем соответствующие классы.

CSS3 страница


Для того, чтобы вам проще было разобраться в свойствах CSS прописала комментарии для каждого свойства

/* Базовые стили кнопок */ .btn { display: inline-block;/*блочный элемент*/ margin: 4px;/*величина отступа*/ box-shadow: 1px 1px 5px #888888; /*тень к элементу*/ padding: 6px 12px;/*поле вокруг элементак*/ font-size: 14px;/*размер шрифта*/ font-weight: 400;/*начертание шрифта*/ line-height: 1.42;/*межстрочный интервал*/ text-align: center;/*Выравнивание текста по центру*/ white-space: nowrap;/*текст отображается одной строкой*/ vertical-align: middle;/*Выравнивание средней точки элемента*/ cursor: pointer;/*Вид курсора */ -webkit-user-select: none;/*Пользователю запрещено выделять элемент*/ -moz-user-select: none;/*Пользователь не может выделить текст*/ -ms-user-select: none; user-select: none; background-image: none;/*фоновое изображение*/ border: 1px solid transparent;/*толщину, стиль и цвет границы вокруг элемента*/ border-radius: 4px;/*радиус скругления уголков рамки*/ } /* Мини кнопки */ .btn-xs{ border-radius: 3px; font-size: 12px; padding: 1px 5px; line-height: 1.5; } /* Маленькие кнопки */ .btn-sm{ padding: 5px 10px; font-size: 12px; line-height: 1.5; border-radius: 3px; text-transform: uppercase;/*символы текста становятся прописными*/ } /* Стандартные кноки */ .btn-md{ text-transform: uppercase; } /* Большие кнопки */ .btn-lg { padding: 10px 16px; font-size: 18px; line-height: 1.33; border-radius: 6px; text-transform: uppercase; } /* Красный оттенок кнопок */ .btn-hot { color: #fff; background-color: #db5566; border-bottom:2px solid #af4451; } /* Красная кнопка при наведении */ .btn-hot:hover, .btn-hot:focus { color: #fff; background-color: #df6a78; border-bottom:2px solid #b25560; outline: none; } /* Красная кнопка при нажатии */ .btn-hot:active { color: #fff; background-color: #c04b59; border-top:2px solid #9a3c47; margin-top: 2px; } /* Желтый оттенок кнопок */ .btn-sunny { color: #fff; background-color: #f4ad49; border-bottom:2px solid #c38a3a; } /* Желтая кнопка при наведении */ .btn-sunny:hover, .btn-sunny:focus { color: #fff; background-color: #f5b75f; border-bottom:2px solid #c4924c; outline: none; } /* Желтая кнопка при наведении */ .btn-sunny:active { color: #fff; background-color: #d69840; border-top:2px solid #ab7a33; margin-top: 2px; } /* Зелёный оттенок кнопок */ .btn-fresh { color: #fff; background-color: #51bf87; border-bottom:2px solid #41996c; } /* Зелёная кнопка при наведении */ .btn-fresh:hover, .btn-fresh:focus { color: #fff; background-color: #66c796; border-bottom:2px solid #529f78; outline: none; } /* Зелёная кнопка при нажатии */ .btn-fresh:active { color: #fff; background-color: #47a877; border-top:2px solid #39865f; outline: none; outline-offset: none; margin-top: 2px; } /* Синий оттенок кнопок */ .btn-sky { color: #fff; background-color: #0bacd3; border-bottom:2px solid #098aa9; } /* Синяя кнопка при наведении */ .btn-sky:hover, .btn-sky:focus { color: #fff; background-color: #29b6d8; border-bottom:2px solid #2192ad; outline: none; } /* Синяя кнопка при нажатии */ .btn-sky:active { color: #fff; background-color: #0a97b9; border-top:2px solid #087994; outline-offset: none; margin-top: 2px; } /* Убираем рамку при фокусе на кнопках */ .btn:focus, .btn:active:focus { outline: none; outline-offset: 0px; }

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