Наша взаимовыгодная связь https://banwar.org/
Пам'ятайте урок Як подвоїти продажі магазину за допомогою однієї кнопки ? Там я розповідав, як зробити круту кнопку, а сама кнопка формувалася з власне об'єкта button і шару без фонового кольору з обідком товщиною в 1 піксель.
Я вирішив спростити структуру і прибрати зайвий шар. Сьогодні представляю невеликий урок, як зробити красиву кнопку з градієнтом на CSS3 без використання графіки, на одному тільки html.
Більш того, це буде працювати без втручання в код сторінки, досить буде прописати відповідні класи в CSS. А при правильному підході цей стиль можна застосувати до всіх кнопок сайту навіть без класу за допомогою конструкції типу:
input [type * = 'button'], input [type * = 'submit']
Кнопка буде виглядати так:
... і вона на 146% краще кнопки додавання в корзину на Amazon.com, інформація з достовірних джерел :).
Як зробити?
В фотошопі або з готових колірних поєднань вибираємо / створюємо колірну гамму кнопки. Нам потрібні коди двох кольорів: верхнього і нижнього. Я вибрав зелений колір для основного і трохи висвітлив його для верхньої межі градієнта. Ви маєте право вибирати будь-які, але особливо не знущайтеся над покупцями: ви ж зацікавлені в покупці, а не в епатаж.
Коли кольори обрані, додаємо в ваш CSS такий код:
.great_btn {background: linear-gradient (to bottom, # 0bc408 0%, # 09a206 100%); color: #fff; font-size: 16px; text-shadow: 0 1px 0 # 757575; padding: 4px 0 5px 0; margin: 0; cursor: pointer; border: 0; border-top: 1px solid # 87c286; border-right: 1px solid # 0e780c; border-left: 1px solid # 0e780c; border-bottom: 1px solid # 0e780c; box-shadow: 0 -1px 0 # 0e780c, 0 1px 0 #fff; width: 150px; border-radius: 2px; }
В html сторінок в коді кнопки потрібно додати
class = 'great_btn'
Кольори для градієнта, як нескладно здогадатися, вказуються у другому рядку. Включайте фантазію і експериментуйте з колірною гамою і напрямком градієнта. Якщо стандартний градієнт вас не влаштує, топайте в редактор градієнта на Colorzilla і створюйте свій стиль для кнопки.
Підтримка CSS3 в Internet Explorer 9 +
Як ви знаєте, браузер Internet Explorer в сварці не тільки зі здоровим глуздом, а й з CSS3. Тому, щоб все працювало в IE9, перед <html> додавайте рядок:
<! DOCTYPE html>
Тим самим ви показуєте браузеру, що параметри CSS3 потрібно обробляти. Як не дивно, якщо цього не вказувати, явні стилі для об'єктів цієї в версією браузера відображаються як в IE8-, тобто ніяк.
Успіхів у роботі!
Як зробити?Як зробити?
Наша взаимовыгодная связь https://banwar.org/. Запустив новый сайт, "Пари Матч" обещает своим клиентам незабываемый опыт и возможность выиграть крупные суммы.
