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

43

Створити кнопки для сайту можна, використовуючи будь-який графічний редактор ( Photoshop, Paint.Net, Gimp та ін), можна, не особливо заморочуючись з приводу вивчення властивостей CSS, скористатися спеціальними генераторами кнопок, благо таких інструментів випущено предостатньо останнім часом.
Мене більше приваблює можливість використання нових стандартів CSS3 при створенні різних елементів дизайну сучасних сайтів, в тому числі і можливість створення чудових кнопок без фонових зображень, виключно з допомогою властивостей CSS3. Тим більше, що практично всі сучасні браузери, відмінно пережовують ці стандарти і властивості.

Сьогодні я хочу запропонувати розібрати черговий цікавий приклад створення кнопок для веб-сайту за допомогою сучасних властивостей CSS3, лінійного і радіального градієнта, різних варіацій скруглення кутів кнопок, а так само чудового ефекту тіні. По суті сказати, що в результаті ми отримаємо невеликий, готовий набір стилів CSS, за допомогою якого ви легко зможете сформувати динамічні кнопки і використовувати їх у своїх нинішніх і майбутніх проектах.

Создать кнопки CSS3

Для початку, можете подивитися готовий приклад цих чудових (на мій погляд) кнопок, і при виникненні бажання отримати такі кнопы у себе на сайті, без особливих роздумів і мук можете завантажити вихідні коди:

ДемоЗавантажити

Всі круті і распупыренные майстра веб-дизайну та верстки, проходять повз, ну, а ми скромні трудівники сайтобудування, набравшись терпіння, і підключивши трохи фантазії, розглянемо докладно, як з допомогою CSS3, можна «малювати», такі кнопки.

Почнемо роботу з визначення структури html наших кнопок, а в більшості випадків, це ніщо інше, як посилання з певним класом, для зв’язування з файлом стилів, в якому зазвичай і формується зовнішній вигляд того чи іншого елемента, в нашому випадку, це кнопки. Особливо мудрувати не будемо і назвемо цей клас: button, він у нас буде базовим для всіх кнопок, різних за формою і кольором.

<a href="#" class="button">Кнопка</a>

Кнопка

Відповідно в css визначаємо властивості цього класу, з необхідними значеннями. Експериментуючи зі значеннями ви завжди зможете з легкістю змінити зовнішній вигляд кнопок на стільки, наскільки розгуляється ваша фантазія.

.button {
position: relative;
display: inline-block;
vertical-align: top;
height: 36px;
line-height: 35px;
padding: 0 20px;
font-size: 14px;
color: white;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
background-clip: padding-box;
border: 1px solid;
border-radius: 3px;
cursor: pointer;
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.25);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.25);
}

.button {
position: relative;
display: inline-block;
vertical-align: top;
height: 36px;
line-height: 35px;
padding: 0 20px;
font-size: 14px;
color: white;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
background-clip: padding-box;
border: 1px solid;
border-radius: 3px;
cursor: pointer;
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.25);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.25);
}

Для більшого розуміння, поясню деякі моменти. У базовому стилі кнопок, використовував легке скруглення кутів border-radius: 3px;, текст розташував по центру, що логічно, додав трохи тіні text-shadow, надавши тексту трішки втиснутий вигляд. Для створення об’ємності кнопок, додав легку тінь всьому елементу box-shadow. Використовував background-clip: padding-box; для відображення фону всередині кордонів.

З базовим стилем, думаю розібралися. Тепер, давайте разукрасим наші кнопки в різні кольори і дамо їм движухи при наведенні, і натисканні. Для кожного кольору прописуємо свій клас, теж особливо не мудруючи, зелена кнопка, значить так і пишемо: button-green, червона, так червона: button-red. Тепер для кожного кольору залишається сформувати стилі css і виставити потрібні тільки вам значення. У прикладі я використовував, чудову функцію лінійного градієнта, з різними колірними відтінками, прописавши властивості для всіх сучасних браузерів (Firefox, Chrome, Safari, Opera і IE10).

На прикладі зеленої кнопки, css це виглядає так:

.button-green {
background: #5ca934;
border-color: #478228 #478228 #3c6f22;
background-image: -webkit-linear-gradient(top, #69c03b, #5ca934 66%, #54992f);
background-image: -moz-linear-gradient(top, #69c03b, #5ca934 66%, #54992f);
background-image: -o-linear-gradient(top, #69c03b, #5ca934 66%, #54992f);
background-image: linear-gradient(to bottom, #69c03b, #5ca934 66%, #54992f);
}

.button-green {
background: #5ca934;
border-color: #478228 #478228 #3c6f22;
background-image: -webkit-linear-gradient(top, #69c03b, #5ca934 66%, #54992f);
background-image: -moz-linear-gradient(top, #69c03b, #5ca934 66%, #54992f);
background-image: -o-linear-gradient(top, #69c03b, #5ca934 66%, #54992f);
background-image: linear-gradient(to bottom, #69c03b, #5ca934 66%, #54992f);
}

Для кожного іншого кольору змінюються тільки цифрові значення HEX-квітів. У своїх експериментах зі значеннями, ви завжди можете скористатися панеллю «безпечних» кольорів, рекомендованих для екранного дизайну.

Важливим моментом при створенні динамічних кнопок, є додавання ефекту при наведенні .button:hover і видозміна кнопки при натисканні .button:active. Тут використовував псевдокласи в парі з псевдоэлементом :before, прописавши йому властивість радіального градієнта, також для всіх сучасних браузерів.

.button:before {
content: ";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
pointer-events: none;
background-image: -webkit-radial-gradient(center top, farthest-corner, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
background-image: -moz-radial-gradient(center top, farthest-corner, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
background-image: -o-radial-gradient(center top, farthest-corner, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
background-image: radial-gradient(center top, farthest-corner, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
}
.button:hover:before {
background-image: -webkit-radial-gradient(farthest-corner, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.03));
background-image: -moz-radial-gradient(farthest-corner, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.03));
background-image: -o-radial-gradient(farthest-corner, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.03));
background-image: radial-gradient(farthest-corner, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.03));
}
.button:active {
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}
.button:active:before {
content: none;
}

.button:before {
content: “;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
pointer-events: none;
background-image: -webkit-radial-gradient(top center, farthest-corner, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
background-image: -moz-radial-gradient(top center, farthest-corner, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
background-image: -o-radial-gradient(top center, farthest-corner, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
background-image: radial-gradient(top center, farthest-corner, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
}
.button:hover:before {
background-image: -webkit-radial-gradient(farthest-corner, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.03));
background-image: -moz-radial-gradient(farthest-corner, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.03));
background-image: -o-radial-gradient(farthest-corner, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.03));
background-image: radial-gradient(farthest-corner, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.03));
}
.button:active {
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}
.button:active:before {
content: none;
}

Для активних кнопок(при натисканні), виключив відображення контенту, залишивши видозмінений відносно базового, ефект тіні для блоку box-shadow. Тим самим ще більше позначивши видимість натискання активної кнопки.

У веб-дизайні дуже популярні кнопки з сильно-округленими кутами, або точніше сказати овальні. З цим у нашому наборі властивостей, теж все дуже просто. Додаємо клас rounded-button і прописуємо для нього одне єдине властивість css:border-radius: 18px;.
Із створенням абсолютно круглих кнопок, які останнім часом також широко використовуються на сайтах, ніяких проблем, все по накатаній. Присвоюємо клас, наприклад circular-button і додаємо властивості width: 36px;, для визначення ширини кнопки, максимально заокруглюємо кути за допомогою border-radius: 65px 65px 65px 65px; і прибираємо відступи padding: 0;. Всі! В комплекті, це виглядає приблизно так:

.rounded-button{border-radius: 18px; }
.circular-button {
border-radius: 65px 65px 65px 65px;
padding: 0;
width: 36px;
}

.rounded-button{border-radius: 18px; }
.circular-button {
border-radius: 65px 65px 65px 65px;
padding: 0;
width: 36px;
}

Все що стосується формування стилів кнопок, на цьому, мабуть, закінчимо. Немає сенсу наводити у статті весь код CSS, для кожної кнопки окремо. Хто зацікавився темою, може завантажити вихідні коди, а там і файл стилів з повним комплектом коду, і сама html-сторінка прикладу. Дивимося приклад, завантажуємо исходники, граємося значень властивостей CSS і отримуємо чудові кнопку до себе на сайт.

ДемоЗавантажити

Удачі! Дощ не може йти вічно…

Якщо ця стаття здалася Вам цікавою, поділіться посиланням на нього зі своїми колегами і друзями, натиснувши на одну з кнопок нижче.