Создаем динамические кнопочки-ссылки с помощью CSS
Чем привлекательны CSS – тем, что они часто, при создании тех или иных эффектов, позволяют заменить JavaScript. Вот и на этот раз каскадные таблицы стилей помогут нам сконструировать красивые динамические кнопочки.
Информацию, изложенную ниже, можно рассматривать как альтернативу способу создания универсальных графических кнопок и данный способ отчасти решает те же задачи.
Такие кнопки-ссылки:
- Растягиваются горизонтально в зависимости от длины текста.
- Могут иметь углы нужной формы, выполненной в рисунке.
- Делают всю площадь кликабельной.
- Остаются удобочитаемыми при отключении изображений.
Особенность кнопки заключается в ее динамике, т.е. меняется ее графическое представление в разных состояниях:
- по умолчанию;
- при наведении курсора;
- при нажатии на кнопку.
Динамическая кнопка с двойным эффектом
Создадим кнопку на 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="#" 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;
}
Готово! Вот что у нас получилось.
Динамическая кнопка с тройным эффектом
Мы пойдем еще дальше и добавим для нашей кнопки-ссылки еще один эффект, который проявляется при нажатии на кнопку. Соответственно для наших изображений мы добавляем еще одно состояние.
spana
Осталось дописать чуток 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>
Смотрите также
Создание универсальных графических кнопок с помощью CSS
Вольный перевод статьи “Creating bulletproof graphic link buttons with CSS” (мои комментарии – курсивом). Проблема в CSS, с которой я боролся в последнее время, – как создать универсальную графическую кнопку. ...
Красивые 3D-кнопки с помощью CSS3
Замечательная технология CSS3 позволяет в ряде случаев при оформлении сайта отказаться от использования изображений, которые заменяет чистый CSS-код. К примеру, подобным образом можно поступить с какими-либо кнопками, используемыми на сайте. ...
Скрипт: hover-эффект для любого элемента в Internet Explorer 6
В свете предложенных дополнительных вариантов скрипта, так сказать, на все случаи жизни, в комментариях к статье “Простейший скрипт для реализации hover-эффекта для любого элемента в Internet Explorer 6“, а также ...
Простейший скрипт для реализации hover-эффекта для любого элемента в Internet Explorer 6
Внимание: рекомендуется обновленная версия данной статьи. Несмотря на то, что данное решение уже опубликовано в РУнете не мной, я просто не могу не написать о нем, т.к. решение, на мой ...
Комментарии (153)
Большое спасибо за статью! Очень помогла! Столкнулся с css – оказалось ничего сложного!))) Все элементарно!
Спасибо за статью, очень полезна, как и остальные ваши статьи типа 3колончатого шаблона)
Но вот проблема возникла, что то не получается своими силами исправить
Хочу сделать вертикальное меню с помощью кнопок, но получаются какие то огромные отступы или вообще по 2 кнопки в строчку залазят
Есть ли способы борьбы с этим?
Вот пример
И еще
CSS:
a.butt {margin: 12px 2px 15px 2px;
display: block;
float: left; /* чтобы кнопка не растягивалась на всю ширину родительского блока, а ограничивалась текстом */
font: bold 12px arial, sans-serif;
color: #ccc;
text-decoration: none;
background: url(http://mssi.wallst.ru/textures/butt/button_r.gif) top right no-repeat;
padding-right: 16px; /* отступ для "раздвижных дверей" */
outline: none; /* убираем точечную обводку в FireFox, которая появляется при клике */
}
a.butt span {
display: block;
line-height: 13px;
background: url(http://mssi.wallst.ru/textures/butt/button_l.gif) no-repeat;
padding: 9px 0 11px 33px;
}
a.butt:hover {
background-position: 100% -33px;
}
a.butt:hover span {
background-position: 0% -33px;
color: #fff;
}
a.butt:active {
background-position: 100% -66px;
}
a.butt:active span {
background-position: 0% -66px;
color: #fff;
padding: 10px 0 10px 33px; /* опускаем текст на 1px */
}
html:
<center>
<p><a href="#" class="butt" onclick="this.blur(); return false;"><span>right</span></a></p>
<p><a href="#" class="butt" onclick="this.blur(); return false;"><span>right</span></a></p>
<p><a href="#" class="butt" onclick="this.blur(); return false;"><span>right</span></a></p>
<p><a href="#" class="butt" onclick="this.blur(); return false;"><span>right</span></a></p>
</center>
Добавьте в стили:
Спасибо, теперь каждая на своей строке, но отступы остались
И заметил еще более важную проблему, ссылки не работают с кнопок этих
Главная страница
Страницы существуют, но при нажатии на кнопку ничего не происходит
Отступы у вас указаны здесь:
Из параметров ссылок удалите
return false;.Сам себе удивляюсь…вот что значит не внимательность! margin даже не заметил :) делал ведь сначала горизонтальное меню..
Благодарю, теперь все работает
Статья очень помогла!
Но в IE 8 кнопки не работают. При наведении курсора на текст кнопки, нажатия не происходит. Опишите, пожалуйста, подробней как заставить кнопки работать в IE 8.
А проблема случайно не та же что и у меня с return false; ?
К сожалению, я не знаю return false; это или ещё что-то, но независимо от наличия или отсутствия этой записи ссылки не работают также как и у Вас на Главной странице . И также как у Вас у меня прописан DOCTYPE Если убрать DOCTYPE, то всё работает нормально, но я не могу его убрать иначе у меня шаблон “плывёт”.
Хотел сделать кнопки на сайт, не заморачиваясь со скриптами, искал – как – и наткнулся на ваш сайт. Всё очень интересно и познавательно, но…Есть одно но, -для новичка немного сложновато( я написал свой сайт полностью в блокноте).Меня это заинтересовало – оказывается есть программа Css меню генератор называется , которая за , буквально, пару минут позволяет без заморочек сгенерировать нужные коды на любое количество кнопок для меню и не только, чтобы не быть голословным – посмотрите сами , что получилось-
m-printservice.ru-
Объясните мне пожалуйста, неучу безграмотному… Нарисовал кнопки, как показано у Вас в учебнике, методом проб и ошибок, сделал ту кнопку которая мне нужна – фон появляется только при наведении в противном случае его нет. Проблема в размещении на странице. Это безобразие прилипает к левому краю, а мне нужно чётко посередь ! Никак не могу отодрать ( Помогите пожалуйста!
a.button {display: block;
float: left; /* чтобы кнопка не растягивалась на всю ширину родительского блока, а ограничивалась текстом */
font: 12px arial, sans-serif;
color: #555;
text-decoration: none;
padding-right: 15px; /* отступ для "раздвижных дверей" */
outline: none; /* убираем точечную обводку в FireFox, которая появляется при клике */
border-top-style: none;
}
a.button span {
display: block;
line-height: 13px;
padding-top: 7px;
padding-right: 0;
padding-bottom: 13px;
padding-left: 15px;
width: auto;
}
a.button:hover {
background-image: url(img/nav-butt-r.png);
background-repeat: no-repeat;
background-position: right;
}
a.button:hover span {
background-image: url(img/nav-butt-l.png);
background-repeat: no-repeat;
color: #0094c7;
}
.button {
padding-top: 5px;
position: relative;
width: auto;
}
У Вас в
a.button { }фон не прописан, поэтому его нет по умолчанию.Да он мне и не нужен был. Я уже разобрался. пришлось пожертвовать “резиновостью”, но кнопки по центру я расположил. Спасибо за пример.. поучительно )
Вот здесь хорошая статья как раз для такого случая:
http://w3pro.ru/article/vyravnivanie-blokov-po-tsentru
т.е. надо вокруг ссылки добавить 2 дополнительных элемента
<div id="center-1"><div id="center-2"><a href="#" name="cat"><img src="button.gif" alt="Кнопочка" border="0"></a></div></div>и в стили добавить:
#center-2 {position: relative;
float: left;
left: 50%;
list-style: none;
margin: 0;
padding: 0;
}
#center-2 a {
position: relative;
float: left;
right: 50%;
padding: 10px;
}
#center-1 {
overflow: hidden;
}
Тупо потраченное время. Предупреждать надо, что в IE6 полная жопа. А вставить вставку “Обновите браузер” проще всего.
Что значит “в IE6 полная жопа”? Я свою кнопку тестировала и под ie6, жопы не наблюдала. Может, подробней опишете свою проблему, выложите код – протестируем и чем сможем – поможем!
Всё это прекрасно, но как сделать так, чтобы переходить на какую-нибудь страницу, нажимая по этой динамической кнопке?
Прописать ссылку вместо знака #.
Спасибо вам огромное! Весь интернет излазил, кнопочку хотел сделать))
теперь, надеюсь, проблем не будет)
Скажите, пожалуйста, а как сделать, чтоб кнопка менялась при нажатии на кнопку мыши а не при наведении???
Поменяйте
:hoverна:active.Dimox
у меня тут вопрос возник. Занялся кроссбраузерностью, по корявости отображения ИЕ впереди планеты всей, что с этим сделать можно?
Да и опера не вполне нормально отображает нажатие на кнопку
Забить на него или почитать эту статью, может пригодится.
Странно, конечно. На момент написания статьи все работало.
Dimox, если скрестить динамически кнопки с табами jQuery, т.е.
<li class="current"><a href="#" class="button"><span>1-я вкладка</span></a></li><li><a href="#" class="button"><span>2-я вкладка</span></a></li>
Насколько это рабочий вариант и будет ли правильным такое решение? Я попробую сделать, но хотелось бы услышать ваше мнение. Преследуется цель сделать табы из графических кнопок под разную длину текста.
Вполне нормально. Только тег
aможно убрать, а вместо него стили применить к тегуli.и что? тогда кнопка будет нелинкабельна и никуда не будет вести, зачем джсом крутить? это вполне кроссбраузерный вариант
Если без
a, то придется использовать скрипт для ИЕ6?
Если нужен эффект при наведении, то да.
Скрестить кнопки и табы получилось! Работает отлично, обошелся без a. Пока скрипт для ИЕ6 задействовать не стал, решил оставить эффект наведения для нормальных браузеров.
Спасибо за помощь, Dimox!
спасибо огромное за блог, очень много информации для начинающего)) очень обстоятельно и детально, спасибо!
заметил баг в firefox с такими кнопками – если навести мышь на кнопку, нажать, а потом удерживая нажатой увести с кнопки, то кнопка останется нажатой.
ну и конечно в ie8 кнопка не нажимается :active не работает похоже((
актив не псевдокласс, в цсс прописывается как обычный дополнительный
простите за спам, но мб. поможет решить проблему – проверил кнопку в опере – проблема та же, что и в IE 8 не работает эфет нажатия, если нажимаешь на левую створку двери, а вот если нажимать на правую – то все нажимается. Т.е. a.button:active работает, а вот a.button:active span уже нет.
буду очень признателен, если подскажете что можно сделать с этим
Код html и css в студию!
Nadyushka, спасибо, что отвечаете!
Можно ориетнироваться на код Dimox’a, я делал по аналогии перепроверил, не работает не только у меня, но и у Dimox’a (в 11 Опере и ИЕ8).
Попробуйте в 11 Опере (благо она бесплатная) нажимать на правую и левую стороны кнопки и увидите, что при клике слева кнопка не нажимается, а справа все ок.
т.е. скорее всего это именно проблема совместимости метода с этими броузерами.
Есть и еще один глюк – при нажатии на правую сторону кнопки не происходит перехода по ссылке ни в одном из броузеров, переход происходит только при клике на левую сторону (но это возможно я что-то с кодом накосячил). Можно посмотреть тут – только я правую сторону делал шириной в 5 px, поэтому нужно приноровиться, чтобы попасть по ней.
Протестировала в последних версиях браузеров (включая Оперу 11), глюка с левой створкой не нашла – при клике даже на самый край кнопки виден визуальный эффект. А вот с правой створкой действительно эффекта не наблюдается.
Жаль, нельзя картинку вставить, нагляднее бы вышло.
Проблема Ваша в том, что картинка правой створки выставлена бэкграундом к ячейке таблицы, то есть она не находится внутри ссылки, и, следовательно, никакого эффекта при нажатии нет, и перехода по ссылке соответственно, тоже.
Ранее в комментах я выкладывала свой вариант кнопки, попробуйте его (страница 4, коммент 105). Этот вариант протестирован и используется в одном из проектов.
Nadyushkа,
странно, может не очень поняли друг-друга…
у меня и Dimoxa на кнопке висят эффекты:
1) наведение мышки –
2) нажатие мышки (утапливание) –
3) переход по ссылке на которую ведет кнопка –
У меня в опере не срабатывает 2) эффект если нажимать на левую створку – кнопка не утапливается.
А у Вас?
А переход по ссылке починил, теперь работает корректно, спасибо за подсказку! Но вот 2-й эффект не удалось заставвить работать.
Нда, когда проект сдавался Оперы 11 еще не было. Так что мой вариант тоже не работает. Слегка потестила – судя по всему внутренний span полностью перекрывает ссылку и при этом перестает работать :active. Буду думать.
Никто не придумал как пофиксить нажатие в IE8?
Присоединяюсь к вопросу
нашел решение для ie8 и opera > v11. Добавить в пустой div с таким стилем:
position:absolute;top:0px;width:100%; height:33px;
где height:33px как понимаете высота вашей кнопки. После этого везде нажимается.
Не помогло. Опера 11.50
в 11.50 тоже проверял – работает. Пустой див в конце, тюею перед
примерно так выглядит
ну а стили как у ТС с добавлением для дива как я написал выше
В общем пустой див прямо перед закрывающимся тегом а (анкором). если правильно сделать, то работает на всех браузерах со времен ie6 до сегодняшних(у меня спец.набор их всех). Проверял на двух компах – нетбук с xp и перс. с win7, хотя операционка и железо совершенно не при чем )
Не работает.
У меня тоже не получилось заставить работать с вложенным дивом.
Вот живой пример: tamzam.ru
Подскажите, какие настройки нужны, чтобы заработало?
Нашел решение для оперы, нужно правила с :active продублировать с :focus
Но в explorer так и не удалось заставить по :active работать обе части “раздвижных дверей”. При нажатии на правую створку срабатывает, а на левую – нет.
Вот эта конструкция не воспринимается: a.button:active span. В принципе, если у вас для графики правая створка не критична, можно для explore дополнительное правило написать a.button span:active, тогда створки работают в нем раздельно, но зато нажимаются))
немного потестил, кнопка в примере при добавлении :focus срабатывает, а вот у меня нет((
все разобрался, если продублировать :focus к тем же событиям, что описаны по :active то срабатывает во всех броузерах включая explorer и opera! В том числе срабатывает и кнопка из примера при нажатии на любую створку.
можно удалить 2 моих предудущих поста, простите за спам
Попробовал сделать, как вы написали. Кнопка нажимается, но не разжимается. У вас также?
странно…
у меня отжимается вроде вот файл из примера на котором тренировался: (http://ifolder.ru/25958855) проверял в опере 11.51 и explorer 8.0 (в хроме и файрфоксе работало и раньше). А вы в каком броузере смотрите?
Еще выше ссылку давал, там тоже можно посмотреть.
Понял, в чем причина. В статье у кнопки я добавил параметр
onclick="this.blur(); return false;", который как раз за отжим и отвечает. А при тестировании на новой странице я забыл его вставить.Спасибо что помогли разобраться. Надо будет обновить статью.
Спасибо, как раз то что искал. Только немного доработал под свои нужды, чтобы span накладывался на ссылку, т.е. перекрывал текст.
добрый день,
существует следующая проблема:
надо на ссылку поставить кнопку-картинку для перехода(на ссылку перехода на англоязычную страницу сайта поставить кнопку-картинку влага Великобритании)
вроде все выглядит отлично и в браузерах работает, кроме IE.
в чем может быть причина и что сделать?
благодарю заранее за ответ.
Вот так сделайте:
спасибо, Dimox, выручил.
Спасибо Dimox! Я как раз делаю сейчас онлайн кинотеатр, и мне эта кнопка ооочень пригодилась!!!