Поиск 

Создаем динамические кнопочки-ссылки с помощью CSS

Понедельник, Декабрь 28, 2009 г.
Чем привлекательны 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 пикселя.



Для получения нужного эффекта раньше я прибегал к помощи JavaScript, CSS при этом вообще не использовался. HTML-код был следующим:

<a href="#" name="cat" onmouseover="document.cat.src='button_hover.gif';" onmouseout="document.cat.src='button.gif';"><img src="button.gif" alt="Кнопочка" border="0"></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;
}

Готово!

Динамическая кнопка с тройным эффектом

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



Осталось дописать чуток CSS для третьего состояния кнопки-ссылки:

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

Готово!

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

P.S. Internet Explorer, как всегда, вставляет нам “палки в колеса” – не возвращает кнопку в нормальное состояние всякий раз, когда она “отпущена”. Чтобы заставить его это делать, для тега а приходится использовать небольшой код JavaScript:

<a href="#" class="button" onclick="this.blur(); return false;"> ... </a>
P.P.S. Созданные изложенным выше способом кнопки с легкостью можно использовать в формах для сайта, для этого лишь потребуется несколько дополнительных событий onclick.
Взято с www.dimox.name
Теги: CSS | JavaScript | Кнопка Автор: Xenta | Просмотров: 4268 | Нет комментариев | print |

Похожие статьи

все похожие статьи 
Категории
ТОП 10 - Авторы
  1     Луна   1964     2.93   
  2     pobeda   487     2.96   
  3     Tais   444     3.11   
  4     Foma   139     2.92   
  5     Lubov   52     2.91   
  6     Angel   45     2.93   
  7     Dolores   45     2.77   
  8     Paradiz   31     2.83   
  9     Xenta   29     2.86   
  10     Pryanik   26     2.8   
все авторы 
Последние статьи

Торт Пьяная вишня

Понедельник, Апрель 01, 2019 г.
|
Луна | 1570 |

Вода

Среда, Январь 24, 2018 г.
|
Луна | 1009 |

Фруктовые соки

Среда, Январь 24, 2018 г.
|
Луна | 889 |

Вода и жизнь

Среда, Январь 24, 2018 г.
|
Луна | 1452 |

Голубцы с грибами

Среда, Январь 24, 2018 г.
|
Луна | 1449 |
Популярные статьи
|
Луна | 4235 |

Неврозы

Вторник, Июль 27, 2010 г.
|
Луна | 980 |

Александр Македонский

Пятница, Август 27, 2010 г.
|
Луна | 11399 |

Подростковый возраст

Вторник, Июль 20, 2010 г.
|
Луна | 99690 |
|
pobeda | 70212 |

Облако тегов