Створюємо динамічні кнопочки-посилання за допомогою CSS

1. Динамічна кнопка з подвійним ефектом
2. Динамічна кнопка з потрійним ефектом
3. виправляємо баг

Наша взаимовыгодная связь https://banwar.org/

Чим привабливі CSS - тим, що вони часто, при створенні тих чи інших ефектів, дозволяють замінити JavaScript. Ось і на цей раз каскадні таблиці стилів допоможуть нам сконструювати красиві динамічні кнопочки.

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

Такі кнопки-посилання:

• Розтягуються горизонтально в залежності від довжини тексту.
• Можуть мати кути потрібної форми, виконаної в малюнку.
• Роблять всю площу клікабельно.
• Залишаються легкими для читання при відключенні зображень.

Особливість кнопки полягає в її динаміці, тобто змінюється її графічне представлення в різних станах:

1. за замовчуванням;
2. при наведенні курсору;
3. при натисканні на кнопку.

Динамічна кнопка з подвійним ефектом

Створимо кнопку на CSS, яка має тільки 2 стани: «за замовчуванням» і «при наведенні курсору«.

Наша кнопка заснована на використанні тега a зі вкладеним в нього тегом span, кожен з яких використовує різні шари фонового зображення. Для отримання можливості розтяжки фону при збільшенні розміру кнопки по горизонталі задіємо так звану техніку «розсувних дверей» . Ось так виглядає кнопка-посилання в частині HTML-коду:

<a href="#" class="button"> <span> Динамічна кнопочка </ span> </a>

Як бачите, код максимально простий. Далі нам потрібно створити зображення кнопки в обох станах. Для цього я скористався програмою «Crystal Button«. Ось що у мене вийшло:

Дефолтна При наведенні миші

Обидва стану кнопки ми помістимо в одне зображення (для кожного з тегів a і span) і для зміни з нормального стану в «hover» будемо зміщувати фонове зображення по вертикалі, CSS легко нам в цьому допоможе (про плюси суміщення зображень в одне розказано в статті «Оптимізація: використовуємо одне зображення замість двох» ). Частина зображення, яка буде розтягуватися в залежності від тексту, зробимо, наприклад, довжиною в 350 пікселів (в залежності від передбачуваної довжини кнопок можна підібрати необхідну довжину цієї частини). Висота нашої кнопки становить 33 пікселя.

span

a

Для отримання потрібного ефекту раніше я вдавався до допомоги JavaScript, CSS при цьому взагалі не використовувався. HTML-код був наступним:

<A href = "#" onmouseover = "document.cat.src = 'button_hover.gif';" onmouseout = "document.cat.src = 'button.gif';"> <img src = "button.gif" alt = "Кнопочка"> </a>

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

Спробуємо зробити точно таку ж кнопку, використовуючи CSS замість JavaScript.

Код, яким оформимо кнопочки «за замовчуванням»:

a.button {display: block; float: left; / * Щоб кнопка не розтягувалася на всю ширину батьківського блоку, а обмежувалася текстом * / font: bold 12px arial, sans-serif; color: # 555; text-decoration: none; background: url (button_r.gif) top right no-repeat; padding-right: 25px; / * Відступ для "розсувних дверей" * / outline: none; / * Прибираємо точкову обведення в FireFox, яка з'являється при кліці * /} a.button span {display: block; line-height: 13px; background: url (button_l.gif) no-repeat; padding: 7px 0 13px 23px; }

Необхідно враховувати, що висота рядка і вертикальні відступи, задані для span, в сумі повинні з точністю дорівнювати висоті зображення (в нашому прикладі - 33px). Якби зображення не мало тіні, то можна було б просто вказати висоту рядка, рівній 33px, тоді текст відразу помістився б вертикально посередині.

Зараз додамо ефект, який з'являється при наведенні курсу миші на кнопку:

a.button: hover {background-position: 100% -33px; } A.button: hover span {background-position: 0% -33px; color: # 222; }

Готово! Ось що у нас вийшло.

динамічна кнопочка

Динамічна кнопка з потрійним ефектом

Ми підемо ще далі і додамо для нашої кнопки-посилання ще один ефект, який проявляється при натисканні на кнопку. Відповідно для наших зображень ми додаємо ще один стан.

span a

Залишилося дописати трохи CSS для третього стану кнопки-посилання:

a.button: active, a.button: focus {background-position: 100% -66px; } A.button: active span, a.button: focus span {background-position: 0% -66px; color: # 222; padding: 8px 0 12px 23px; / * Опускаємо текст на 1px * /}

Готово! Можна клікати!

зберегти Відміна

Виходить цілком симпатично, чи не так? :)

За бажанням, для всіх трьох станів кнопки можна встановити фоновий колір, на випадок, якщо в браузері користувача відключений показ зображень. У такому випадку досить класів a.button, a.button: hover і a.button: active додати властивість background-color.

виправляємо баг

У браузерах Opera і Internet Explorer спостерігається наступний баг - в них щоразу, коли кнопка «відпущена», вона не повертається в стан за замовчуванням. До речі, в ранніх версіях Опери такого бага не спостерігалося. Щоб усунути цю неприємність, для тега а доводиться використовувати невеликий код JavaScript. Таким чином html-код кнопки буде виглядати наступним чином:

<a href="#" class="button" onclick="this.blur();"> <span> Динамічна кнопочка </ span> </a>

* * *

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