CSS3 Градієнт для кнопок

Відмінною стороною цього є можливість його застосування до будь-якого елементу HTML, таких як div, span, p, a, button, input, тощо. Градієнт за допомогою CSS3 є «крос-браузером» і підтримується більшістю сучасних браузерів (IE, Firefox 3.6, Chrome та Safari). Ще зовсім нещодавно в Opera, кнопки відображалися з фоном суцільної заливки без градієнта, виглядали наші кнопки зовсім не погано, але все ж таки це було серйозним упущенням в роботі настільки популярного браузера. І ось, нарешті, до розробників Opera зійшло прозріння і в черговій версії свого дітища, в новій Opera 11, суворі норвезькі хлопці додали нові функції, в тому числі і підтримку градієнта: background-image: -o-linear-gradient

Переваги методу

Чистий CSS: не використовуються зображення або Javascript.
Крос-браузерність підтримується основними браузерами (IE, Firefox 3.6, Opera, Chrome і Safari).
Розмір кнопки та закруглені кути можна регулювати, змінюючи розмір шрифту та відступи.
Три стани кнопки: нормальний, режим наведення та активний.
Застосовується до будь-якого елементу HTML: a, input, button, span, div, p, h3 і т.д.
Запасний варіант для браузерів, що не підтримують функцію градієнта CSS, тупо виводиться кнопка без градієнта і тіні.

Можете подивитися демонстраційну сторінку з кнопками в різних браузерах, ну а ті кому це в брухт, чи немає такої можливості, дивіться на малюнок нижче, на ньому показано, як кнопки відображатимуться в різних браузерах.

Кожна кнопка просто зобов'язана додавати "движухи" сайту, наші кнопки таку "движуху" мають, тобто у кнопок три стандартні режими або статусу, це кому якзручніше:

Нормальний стан – градієнт фону, кордону та тіні.
При наведенні темний градієнт.
Активний режим – зміна напрямку градієнта, 1px вниз, темний колір шрифту.

CSS3 стилі для кнопок

Тихим сапом ми підібралися до основи оформлення наших кнопок. Наступний стиль буде загальним для всіх кнопок .button class. Щоб створити масштабовану базу(тіло), ми використовуємо властивість для внутрішнього відступу padding і визначаємо заокруглення кутів border-radius. Це дає нам можливість налаштувати округлені кути та розмір кнопки, просто змінивши межі радіусу, розмір шрифту та відступи. Наприклад: я можу зробити менше кнопку за рахунок зменшення розміру шрифту та значення оступу (Див. демо). І так, загальний код для стилів кнопок буде таким:

Тепер залишається справа за малим, розфарбувати наші кнопки та не просто залити фон, а використовувати функцію градієнта на повну.

Колір градієнта CSS

У наведеному нижче прикладі показано код стилю CSS для помаранчевого кольору нашої кнопки. Першим пунктом прописано значення для браузерів, які не підтримують CSS3, так би мовити запасний варіант. Далі за накатаною, друга лінія для браузерів Webkit, третя лінія для Firefox, окремий параметр для нової версії Opera 11, а в останньому рядку градієнта фільтр, який обробляє лише Internet Explorer. Детально і в тему, якщо хтось забув, розписано у статті Градієнт CSS у сучасних браузерах. У код прописав деякі пояснення, для кращого сприйняття:

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

Як використовувати кнопки?

Допустимо, ви нестримно захотіли синю кнопку для використання на своїй сторінці:

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

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

Всім вдячний, якщо підтримаєте проект — додавши блог у виключення AdBlock і поділіться посиланням на запис у своїх соц-мережах: