Привабливі 3D кнопки за допомогою CSS3

26

Завдяки новим функціям CSS3 стало можливим відмовитися від використання зображень при оформленні елементів інтерфейсу сайту, на зміну картинок приходить чистий код CSS. Так наприклад, все частіше надходять при формуванні кнопок, що використовуються на сайті.
Одного разу я вже розповідав, як користуючись виключно засобами CSS3, можна «намалювати» красиву кнопку в стилі 3d.
Сьогодні, пропоную черговий набір правил CSS3, для формування привабливих кнопок в стилі 3D, без використання додаткових фонових зображень. Весь код CSS розбитий так, щоб стилі можна було використовувати, як в загальному масиві, так і для кожної кнопки окремо.

Привлекательные 3D кнопки

ДемоСкачать

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>

Кнопка 1
Кнопка 2
Кнопка 3
Кнопка 4

Для маленьких:

<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>

Кнопка 1
Кнопка 2
Кнопка 3
Кнопка 4

Для стандартних:

<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>

Кнопка 1
Кнопка 2
Кнопка 3
Кнопка 4

Для кнопок великого розміру:

<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>

Кнопка 1
Кнопка 2
Кнопка 3
Кнопка 4

Як бачите в конструкції кнопок задіяний тег з прописаними певними класами, визначають безпосередньо в css всі необхідні параметри кнопок, тобто базові стилі: btn, колір кнопки: btn-hot btn-sunny btn-sunny і btn-sky відповідно, а так само розмір: btn-xs для самих маленьких кнопок, btn-sm виводить кнопки побільше, стандартних кнопок відповідає клас btn-md, та щоб вивести зовсім великі кнопки, досить додати btn-lg.
Клас btn загальний для всіх кнопок і відповідає за базові стилі, вам залишається вибрати потрібний вам колір і розмір кнопки, і в тезі прописати відповідні класи.

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.42857143;
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: 10px 5px;
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;
}

/* Базові стилі кнопок */
.btn {
display: inline-block;
margin: 4px;
box-shadow: 1px 1px 5px #888888;
padding: 6px 12px;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
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: 10px 5px;
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-кнопки, якщо сподобається і ви захочете використовувати, то просто скачайте исходники в архіві з мого Яндекс.Диска:

ДемоСкачать

Коректно кнопки відображаються у всіх сучасних браузерах Opera, Firefox, Chrome, Safari і Internet Explorer 9+, в IE8 відсутні закруглення кутів, але це не особливо критично. Виходячи з цього можна зробити висновок, що такі 3D-кнопки, сформовані з допомогою CSS3, можна і навіть потрібно використовувати на своїх веб-проектах.

Набір правил і властивостей CSS заснований на стилях окремих елементів популярного css-фреймворку Twitter Bootstrap і можуть бути використані без підключення цієї бібліотеки інструментів для створення сайтів.

З Повагою, Андрій .

Буду вдячний, якщо поділитеся посиланням на запис в своїх соціальних мережах: