Привіт шановні відвідувачі! У сьогоднішній статті ми з Вами поговоримо про CSS кнопках. Навчимося створювати море різновидів красивих CSS кнопок, для своїх блогів і сайтів.
Як зробити кнопку CSS? Завдяки стилям CSS, можна зробити різні кнопки з якими хочете ефектами і навіть не потрібно ставити якісь картинки або JavaSkripti.
Уміння створювати CSS кнопки, знадобляться не тільки новачкам, який створив недавно свій блог або сайт, дані знання знадобляться людям, які хочуть удосконалювати свої проекти.
- Стильна кнопка
- Пропис в значення файлу
- Створення красивої CSS кнопки
- Результат на обличчя
ЗВИЧАЙНА браузерних HTML КНОПКА, БЕЗ ДОДАВАННЯ СТИЛІВ CSS ВИГЛЯДАЄ ОСЬ ТАК
Зауважте, що вид кнопки буде залежати не тільки від браузера, яким Ви користуєтесь, а і від теми робочого столу. Покажу приклад: в найпопулярніших браузерах (Mozila Firefox, IE і Opera) ось так виглядають кнопки в звичайному стилі Windows XP:
Теже самі кнопки але, в перетвореному класичному стилі OC вони будуть виглядати ось так:
Звичайно ж кнопку можна змінити якщо застосувати інший стиль, ось приклад кнопок:
Відкривайте в папці з Вашої темою файл style.css і туди пропишемо наступне
створена кнопка буде виглядати ось так
Параметри коду кнопки можна замінити і зробити її так як буде приємно бачити її Вам! Наприклад, додамо CSS кнопці обсяг, тобто змінимо параметр рамки:
Поміняйте на такі параметри:
Тепер наша кнопка буде виглядати ось так:
Тепер додамо CSS кнопці прикраса за допомогою CSS 3, його розуміють всі сучасні браузери.
Якщо у користувача буде старий браузер то, він просто не побачить деякі ефекти нашої кнопки, відразу хочу попередити, що бояться тут нічого, це ніяк не відіб'ється на роботі кнопки, тому як стилі CSS використовуються тільки для прикраси.
Давайте створимо, який не будь class, щоб зробити на код універсальним, наприклад, зробимо class .blue і попишу те ж саме для класу
код CSS буде виглядати ось так
Навіщо взагалі потрібні класи? Якщо Ви все повторювали за мною, значить на Вашому блозі зараз два види кнопок, які ми робили за допомогою тегів і тега
Відповідаючи на питання: навіщо потрібні класи - в потрібному Вам місці ставте клас і тоді кнопка прийме такий вигляд і колір як ви і хотіли.
Зараз я зроблю дві кнопки, в жодній не буду вказувати клас, а в інший вкажу.
/ * Кнопка із зазначенням класу * /
Зробимо округлі кути в кнопках, написавши наступне:
Тепер наш код буде виглядати ось так:
Тепер давайте додамо кнопці обсягу, додавши білу смугу в верхню частину і зробимо внутрішню тінь:
Як бачите можна експериментувати нескінченно, варіантів море. Можна ще зробити тінь напівпрозору навколо кнопки. Замінимо код:
Останній приклад
Зробимо класний ефект, при наведенні мишки на кнопку вона буде змінюватися і при натисканні на неї, тобто зробимо CSS натискання кнопки. Зробимо це за допомогою класу: hover і класу: active. Давайте приєднаємо псевдо-клас: hover до тегу
Завдяки псевдо класу: active зробимо ефект натискання, додамо до коду який використовуємо при наведенні миші, вставимо тінь з ліва у внутрішній частині кнопки і вгорі, ну і зрушимо текст трохи в низ і вправо:
Останній варіант для вашої кнопки в CSS стилі виглядати так (показаний останній варіант):
Подивитися дана дія Ви можете в правому сайтбаре блогу «Меню курсів».
Спеціально для Вас
Поділитися корисною інформацією