Создаем динамические кнопочки-ссылки с помощью CSS
Чем привлекательны CSS - тем, что они часто, при создании тех или иных эффектов, позволяют заменить JavaScript. Вот и на этот раз каскадные таблицы стилей помогут нам сконструировать красивые динамические кнопочки.
Информацию, изложенную ниже, можно рассматривать как альтернативу способу создания универсальных графических кнопок и данный способ отчасти решает те же задачи.
Такие кнопки-ссылки:
- Растягиваются горизонтально в зависимости от длины текста.
- Могут иметь углы нужной формы, выполненной в рисунке.
- Делают всю площадь кликабельной.
- Остаются удобочитаемыми при отключении изображений.
Особенность кнопки заключается в ее динамике, т.е. меняется ее графическое представление в разных состояниях:
- по умолчанию;
- при наведении курсора;
- при нажатии на кнопку.
Динамическая кнопка с двойным эффектом
Создадим кнопку на CSS, которая имеет только 2 состояния: “по умолчанию” и “при наведении курсора“.
Наша кнопка основана на использовании тега a со вложенным в него тегом span, каждый из которых использует различные слои фонового изображения. Для получения возможности растяжки фона при увеличении размера кнопки по горизонтали задействуем так называемую технику “раздвижных дверей”. Вот так выглядит кнопка-ссылка в части HTML-кода:
1 | <a href="#" class="button"><span>Динамическая кнопочка</span></a> |
Как видите, код максимально прост. Далее нам нужно создать изображения кнопки в обоих состояниях. Для этого я воспользовался программой “Crystal Button“. Вот что у меня получилось:
ДефолтнаяПри наведении мыши
Оба состояния кнопки мы поместим в одно изображение (для каждого из тегов a и span) и для смены с нормального состояния в “hover” будем смещать фоновое изображение по вертикали, CSS легко нам в этом поможет (о плюсах совмещения изображений в одно рассказано в статье “Оптимизация: используем одно изображение вместо двух”). Часть изображения, которая будет растягиваться в зависимости от текста, сделаем, к примеру, длиной в 350 пикселей (в зависимости от предполагаемой длины кнопок можно подобрать необходимую длину этой части). Высота нашей кнопки составляет 33 пикселя.
Для получения нужного эффекта раньше я прибегал к помощи JavaScript, CSS при этом вообще не использовался. HTML-код был следующим:
1 | <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.
Код, которым оформим кнопочки “по умолчанию”:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | 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, тогда текст сразу поместился бы вертикально посередине.
Сейчас добавим эффект, который появляется при наведении курса мыши на кнопку:
1 2 3 4 5 6 7 | a.button:hover { background-position: 100% -33px; } a.button:hover span { background-position: 0% -33px; color: #222; } |
Готово! Вот что у нас получилось.
Динамическая кнопка с тройным эффектом
Мы пойдем еще дальше и добавим для нашей кнопки-ссылки еще один эффект, который проявляется при нажатии на кнопку. Соответственно для наших изображений мы добавляем еще одно состояние.
spana
Осталось дописать чуток CSS для третьего состояния кнопки-ссылки:
1 2 3 4 5 6 7 8 | 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:
1 | <a href="#" class="button" onclick="this.blur(); return false;"> ... </a> |
P.P.S. Созданные изложенным выше способом кнопки с легкостью можно использовать в формах для сайта, для этого лишь потребуется несколько дополнительных событий onclick.
* * *
Когда ваша мебель приходит в негодность и настает момент, что пора от нее избавиться, то самое время воспользоваться услугой по утилизации мебели. Лучше избавиться от хлама и купить новую и красивую мебель.
В соответствии со спецификацией, в background-position нельзя сочетать ключевых слова с числовыми значениями.
“One can also use keyword values to indicate the position of the background image. Keywords cannot be combined with percentage values, or length values. The possible combinations of keywords and their interpretations are as follows:”
13 Colors and Backgrounds
Хотя помню, что сам где то так делал))
Спасибо за статью как раз пригодилась для конкретного проекта.
Спасибо за подсказку. Исправил и приму к сведению.
За статью пожалуйста. Рад, что она помогла.
Очень познавательно, однако, я столкнулся с такой проблемой:
при событии onclick выполняется код JavaScript, но не переход по ссылке. Для того чтоб всё работало, я заменил событие onclick на событие onmouseup.
На этой странице кнопка работает, но если скопировать код кнопки в отдельный докумнт, происходит описанное выше. Объясните пожалуйста, что я не так сделал?
sk0t, по сути, ни событие onclick, ни событие onmouseup нам вообще не нужны, поскольку отжима кнопки при клике просто можно не успеть увидеть - в этот момент может загружаться другая страница, все зависит от задержки между кликом по кнопке и началом загрузки данных.
В JavaScript я не силен, но полагаю, что событие onclick поможет в том случае, если кнопку использовать с дополнительным яваскрипт-кодом, и не как ссылку, а именно как кнопку к какой-нибудь форме.
А здесь кнопка работает потому, что она ссылается на эту же страницу и ничего больше не загружает.
Спасибо за разъяснение.
Только у меня ссылка вела на исполняемый файл(HTML-Autorun) и возвращение кнопки в нормальное состояние было для меня актуальным.
Тогда, видимо, вам нужно поступать, как я и говорил - использовать комбинацию onclick, которая в примере, + код ява-скрипта, который бы запускал этот файл.
Отличный сайт, Dimox!
Трудно было оставить комментарий, поскольку картинка с буквами закэшировалась, но очень хотелось похвалить!
Молодец!!!
Спасибо, Сергей, очень приятно!
Сделал для input`ов, но в ИЕ криво работает, т.е. нет при наведении подсветки, не подскажите?, вот что получилось:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
font: bold 12px arial, sans-serif;
color: #555;
line-height: 13px;
text-decoration: none;
background: transparent top right no-repeat;
border: 0;
cursor: pointer;
}
span#button{
display: block;
float: left;
background: url(button_r.gif) top right no-repeat;
padding-right: 25px;
outline: none;
position: relative;
}
span#button b{
display: block;
line-height: 13px;
background: url(button_l.gif) no-repeat;
padding: 7px 0 10px 23px;
}
span#button:hover {
background-position: 100% -33px;
}
span#button:hover b{
background-position: 0% -33px;
color: #222;
}
span#button:active{
background-position: 100% -66px;
}
span#button:active b{
background-position: 0% -66px;
color: #222;
padding: 8px 0 12px 23px;
}
использовать так:
2
3
4
5
<span id=button><b><input class="button" type="button" name="check" value="Я согласен с этими условиями!" ></b></span>
<span id=button><b><input class="button" type="button" name="check" value="Я НЕ согласен с этими условиями!" ></b></span>
<span id=button><b><input class="button" type="reset" value="Отмена" ></b></span>
</form>
DeadLy, ответ прост - IE версии 6.0 и ниже не воспринимает псевдо-класс :hover для всех элементов, кроме тега <a>. Для решения этой проблемы советую прочитать статью CSS:hover для любого элемента.
Dimox, спасибо, но я behavior’ом решил не заморачиватся, решил проблему вот так:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
input.buttons{
font: bold 12px arial, sans-serif;
color: #555;
line-height: 13px;
text-decoration: none;
background: transparent;
border: 0;
cursor: pointer;
}
a#buttons{
display: block;
float: left;
text-decoration: none;
background: url(button_r.gif) top right no-repeat;
padding-right: 25px;
outline: none;
position: relative;
}
a#buttons b{
display: block;
line-height: 13px;
background: url(button_l.gif) no-repeat;
padding: 7px 0 10px 23px;
}
a#buttons:hover {
background-position: 100% -33px;
}
a#buttons:hover b{
background-position: 0% -33px;
color: #222;
}
a#buttons:active{
background-position: 100% -66px;
}
a#buttons:active b{
background-position: 0% -66px;
color: #222;
padding: 8px 0 9px 23px;
}
</style>
2
3
4
5
<a href="#" id=buttons><b><input class="buttons" type="submit" name="check" value="Я согласен с этими условиями!" ></b></a>
<a href="#" id=buttons><b><input class="buttons" type="submit" name="check" value="Я НЕ согласен с этими условиями!" ></b></a>
<a href="#" id=buttons><b><input class="buttons" type="reset" value="Отмена" ></b></a>
</form>
DeadLy, вот и замечательно. Только есть минус в этом варианте - HTML-код не валидный.
когда придумаю полностью валидный код - напишу сюда ))
Dimox, спасибо за статью, очень подробно и по делу! Хотел бы еще добавить вот чего: ие6 при наведении курсора загружает картинку с сервера по-новой - так называемый IE flickering bug. И дело даже не в трафике :), а в том, что на время загрузки картинки фон пропадает. Я сделал так: обернул ссылки в контейнеры (подошли li), которым в качестве фона задал ту же картинку в дефолтном положении. И хоть ие все равно ломится на сервер, мерцания уже не наблюдается.
Пожалуйста, juice.
Ну, ИЕ как всегда отличился :))). Спасибо за информацию, приму к сведению.
Здравствуйте! Огромное спасибо Вам за эту замечательную статью.
CSS только начинаю изучать. поэтому куча вопросов:
Подскажите, а как прижать кнопку в верхний левый угол?
вот мой код:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
display: block;
float: left;
padding-right: 25px;
outline: none;
position: relative;
}
a.button span {
display: block;
line-height: 49px;
background: url(images/knopka_gold.png) no-repeat;
padding: 9px 0 13px 23px;
}
a.button:hover {
background-position: 100% -70px;
}
a.button:hover span {
background-position: 0% -70px;
color: #222;
}
a.button:active {
background-position: 100% -140px;
}
a.button:active span {
background-position: 0% -140px;
color: #222;
padding: 10px 0 12px 23px;
}
Еще раз огромное спасибо!
Виктор, я вижу, что по ссылке http://probegauto.ru/new/, которую вы давали, все в порядке. Вопрос еще актуален?
Все в норме. Оказывается в css разрешены отрицательные координаты
top: -10px решили проблему.
Спасибо.
Теперь возник еще один вопрос. Ответ на него будет интересен многим.
Если взять за вариант - изготовление css меню, то какими средствами (видимо JavaScript) подсвечивать выбранный ранее пункт меню?
Представим себе:
Выбираем кнопку меню ГЛАВНАЯ,
загружается Главная страница и кнопка меню ГЛАВНАЯ подсвечивается,
что указывает на факт нахождения именно на странице ГЛАВНАЯ.
Как этого добиться?
Немного сумбурно, но вполне понятно.
Замечательно, что разобрались.
По поводу выделения текущего пункта меню. Во-первых, сначала для него нужно создать отдельный CSS-класс. Во-вторых подставление этого класса к текущему пункту осуществляется либо вручную (если страницы статические), либо, если страницы динамические, средствами движка. Т.е. используется программирование.
С помощью JavaScript, наверное тоже такое возможно, только я не знаю как.
Т.е. вам нужно исходить из того, каким образом создаются страницы.
Поборол я проблему.
Сначала описываем еще один класс:
2
3
4
5
6
7
8
9
10
11
12
13
display: block;
float: left;
padding-right: 0px;
outline: none;
position: relative;
}
a.buttonactive span {
display: block;
background: url(images/m0.png) no-repeat;
padding: 0px 0 0px 20px;
background-position: 100% -35px;
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Теперь ссылки на страницы:
$pagename[0]="lot_new.php";
$pagename[1]="buycar.php";
$pagename[2]="salecar.php";
$pagename[3]="kredit.php";
$pagename[4]="insurance.php";
$pagename[5]="contacts.php";
а теперь:
for ($i = 0; $i <= 5; $i++) {
echo '<td><a href='.$pagename[$i].' ';
if ($spn==$pagename[$i]) echo 'class="buttonactive" '; else echo 'class="menubutton" ';
echo ' ><span><img src="/new/images/unvisible.gif" border="0" width="90" height="35"></span></a></td>';
}
Теперь еще один вопрос: а как средствами CSS сделать ширину выводимой кнопки фиксированной? Чтобы размер не зависел от количества символов надписи…
Для этого в CSS есть параметр width. Пример:
2
3
width: 100px;
}
Данная запись означается, что кнопка будет шириной в 100 пикселей.
Спасибо!
Результат вот здесь: http://www.probegauto.ru/new/lot_new.php?id=1847
По вышеуказанной технологии выполнено меню и кнопка НАЙТИ АВТО.
Получилось отлично!
Пожалуйста. Рад, что у вас все получилось. ;)
Спасибо за статью, нового для себя ничего не узнал, но описано очень четко, акуратно и качественно.
Sergey упоминал о том что картинки закешировалась и он не мог отослать камент - для этого придумали сочетание клавиш Ctrl + R - причем про F5 я уже вообще забыл и практически никогда не использую.
Спасибо, XAMelleOH .
<a href=http://aciddog.nm.ru/button/> чуть логичней и компактнее </a>
Очень хорошая статья! Вот только проблемка с Crystal Button… Можете подсказать, где можно скачать полностью бесплатную версию?
Ну или хотя бы кряк?
Здравствуйте. У меня не работает событие .button:active{} Пробовал запускать и в мозиле и в 7 осле и в опере. Ни в какую. С чем это может быть связано?
Не видя рабочий пример, я не могу ничего сказать.
Прошу прощения. Вот он:
.ButtonEmty
{
width:20px;
height:20px;
background-image:url(’ButtonEmty.png’);
display:block;
text-decoration: none;
}
.ButtonEmty:hover
{
background-position:-20px 0;
}
.ButtonEmty:active
{
background-position:-40px 0;
}
Не вставляется тег а =( В общем в нем прост присваивается класс ButtonEmty
Даже не знаю, в чем причина. Если класс ButtonEmty используется для тега ссылки, то по идее должно бы работать.
2
<li><a href="#" class="current"><b>Parks & Recreation</a></b></li> </ul>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
float: left;
font-size:14px;
color:#016d9a;
margin: margin:0;
}
a b { font-weight:normal;}
ul#mainlevel li a:hover {
position:relative;
left:-4px;
padding:0 0 0 5px;
color:#20ba49;
text-decoration:none;
background: url('img/menu/left_on.gif') 0 0 no-repeat;
}
*HTML ul#mainlevel li a:hover {
overflow:visible;
}
ul#mainlevel li a:hover b {
padding:0 6px 0 0;
margin:0;
background: url('img/menu/right_on.gif') top right no-repeat;
display:block;
position:relative;
color:#fff;
} *HTML ul#mainlevel li a:hover b {
margin:0 -1px;
}
Пример не работает только в Сафари, т.к. он не поддерживает теги вложенные внутрь ссылки
У меня вот такая проблема. Я вставил то что вы привели выше и у меня получилось что один рисунок наехал на другой, а при наведении они исчезают. С чем это может быть связанно?
a.button {
display: block;
width: 90px;
float: left; /* чтобы кнопка не растягивалась на всю ширину родительского блока, а ограничивалась текстом */
font: bold 12px arial, sans-serif;
color: #555;
text-decoration: none;
background: url(http://eccentr1c.narod.ru/Untitled.gif) top right no-repeat;
padding-right: 25px; /* отступ для “раздвижных дверей” */
outline: none; /* убираем точечную обводку в FireFox, которая появляется при клике */
}
a.button span {
display: block;
line-height: 13px;
background: url(http://eccentr1c.narod.ru/Untitled1.gif) no-repeat;
padding: 7px 0 13px 23px;
}
Простите. Это тоже вставил. Всёравно абракадабра. http://eccentr1c.narod.ru/test2.html - тут я тестирую этот скрипт.
a.button:hover {
background-position: 100% -33px;
}
a.button:hover span {
background-position: 0% -33px;
color: #222;
}
3cc3ntr1c, потому что у вас неправильно использованы рисунки. Untitled.gif и Untitled1.gif должны быть левой и правой частью одной кнопки, а у вас это 2 разные кнопки.
А кнопки должны обе быть в одном рисунке?
В статье же все видно. Левые части всех состояний кнопок - один рисунок, правые части - другой.
А вот к примеру мне не нужно чтоб кнопки растягивались. Я создал рисунок, но в отличии от вашего они у меня сьезжают. Просто хотелось бы узнать какие именно параметры отвечают за сдвиг рисунка под соответствующуюю кнопку. А у меня получается что виден больший кусок рисунка чем мне нужен… Вообщем как-то так)
Вообщем сделал вот так. При наведении на кнопку картинка сьезжает вниз. Вот как мне сделать как у вас что-б она оставалась на месте? Какой параметр нужно крутить? Да я добавил фиксацию размера кнопок. Может это из-за этого?
a.button {
display: block;
width: 90px;
float: left; /* чтобы кнопка не растягивалась на всю ширину родительского блока, а ограничивалась текстом */
font: bold 14px Taurus, sans-serif;
color: #555;
text-decoration: none;
background: url(http://eccentr1c.narod.ru/but31.gif) top right no-repeat;
padding-right: 25px; /* отступ для “раздвижных дверей” */
outline: none; /* убираем точечную обводку в FireFox, которая появляется при клике */
}
a.button span {
display: block;
line-height: 3px;
background: url(http://eccentr1c.narod.ru/but31.gif) no-repeat;
padding: 7px 0 13px 23px;
}
a.button:hover {
background-position: 100% -30px;
}
a.button:hover span {
background-position: 0% -30px;
color: #222;
}
a.button:active {
background-position: 100% -60px;
}
a.button:active span {
background-position: 0% -60px;
color: #222;
padding: 8px 0 12px 23px; /* опускаем текст на 1px */
}
Надо тогда почитать руководство по CSS, чтобы знать какие параметры за что отвечают.
Простите за назойливость. Вы не подскжите как зафиксировать такую кнопку и для Експлорера? В Опере размер фиксируется, а в Експлорере растягивается или сужается под текст.
Для этого есть параметр width.
Да, это я знаю. И я поставил его в код. Только в Опере кнопки зафиксировались, а в Експлорере увы нет.
Dimox, отличный урок! спасибо.
от себя добавлю:
для IE помимо обработчика события onmouseup следует ещё добавить onMouseOut.
т.к. если зажать и затем разжать мышку вне зоны кнопки (click and drag), стиль active также застопорится. в данном случае, кстати, мы не переходим по ссылке и кнопка остаётся в состоянии active.
PS обработчик onclip в вышеизложенном не нуждается
Автор, спасибо большое, именно то, что искал. Быстро и изящно ) правда кнопки графические не айс получились :) ну эт мелочи
Спасибо за пример, очень приятная тема…но, есть один маленький ньюанс
Если используетсо *.png с фильтром прозрачности ( filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’your_img.png’); ), то в ИЕ6-7 кнопка просто разваливается…
Как побороть пока не нашел, буду благодарен если кто-то сталкивался и может поделиться решением
Спасибо, сделал по предложенному рецепту вкладки страниц вверху своего сайта http://techvesti.ru
Спасибо.
Технолог, подскажите каким образом у Вас получилось так, что при нахождении на странице сайта выделена цветом соответствующая кнопка меню?
Спасибо
room, это функция движка, которая используется на том сайте. К пункту меню, который соответствует текущей странице, приписывается заданный CSS-класс.
Dimox, спасибо за ответ. Это я понял. Более того, как это должно происходить я вычитал здесь (пункт 10): http://www.realcoding.net/article/view/4830,
но из-за своей криворукости и полного отсутствия навыков, воплотить в действительность не могу. Чего только не творил – результат ноль. Может поможете (если не затруднит)?
Спасибо.
зы
На всякий случай, вот моё меню:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<title>menu</title>
<style type="text/css">
.menu {padding:0 0 0 32px; margin:0; list-style:none; height:25px; background:#fff url(back.gif); position:relative; border:1px solid #000; border-width:0 1px 1px 1px; border-bottom-color:#444;}
.menu li {float:left;}
.menu li a {display:block; float:left; height:25px; line-height:23px; background:url(0.gif); color:#fff; text-decoration:none; font-size:11px; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 0 0 12px; cursor:pointer;}
.menu li a b {float:left; display:block; padding:0 12px 0 0; background:url(0.gif) right top;}
.menu li.current a {color:#fff; background:url(2.gif);}
.menu li.current a b {background:url(2.gif) right top;}
.menu li a:hover {color:#000; background:url(1.gif);}
.menu li a:hover b {background:url(1.gif) right top;}
.menu li.current a:hover {color:#fff; background:url(2.gif); cursor:default;}
.menu li.current a:hover b {background:url(2.gif) right top;}
</style>
</head>
<body>
<ul class="menu">
<li><a href="titul.html" target="window-1"><b>Титульная</b></a></li>
<li class="current"><a href="news.html" target="window-1"><b>Новости</b></a></li>
<li><a href="publ.html" target="window-1"><b>Публикации</b></a></li>
<li><a href="photo.html" target="window-1"><b>Фотки</b></a></li>
<li><a href="gb.html" target="window-1"><b>Гостевуха</b></a></li>
</ul>
</body>
room, Можно попробовать через SSI указывать…енто делаетсо довольно просто…главное чтоб хостинг поддерживал
ЗЫ: Неужто никто не сталкивался с проблеммой, которую я описал выше? =(
Akill, спасибо за ответ, но что такое SSI я пока не знаю (
room,
Без картинок мне не видно результата.
Здравствуйте Dimox.
Мои кнопки:
back.gif - полоска, на которой лежат кнопки;
0.gif - кнопка в нормальном состоянии;
1.gif - курсор над кнопкой;
2.gif - нажатая кнопка (видимо - class=”current”).
зы. Спасибо за непосылание :)
Посмотрел с картинками. Стили работают, как надо. Не понимаю, в чем проблема.
Dimox, спасибо за ответ.
Реализация самого меню с кнопками только средствами CSS, как Вы уже заметили, прошла успешно (накачал уйму вариантов).
Для меня проблемой стала “подсветка” пункта меню при нахождении “юзера” на соответствующей странице сайта.
Т.е., если “юзер” находится на “Главной странице” - “светится” кнопка “Главная” в меню (т.е., в моём случае, активна картинка 2.gif). При переходе на следующую страницу “Фотки” - кнопка меню “Фотки” (и т.д.). Реализация данного действа с применением .a link, hover, visited {color#} только до первого клика мышкой.
Один из вариантов такого решения - это присвоение соответствующего id в тэге body каждой странице (т.е. [body id=”main”]) и, далее, создание класса для кнопок меню (или что-то в этом роде). Но ввиду того, что в CSS я, мягко выражаясь, полный профан (как не трудно догадаться), прошу Вас, если не затруднит, помочь мне решить эту проблему.
Спасибо.
То, что вы хотите сделать, решается на уровне движка сайта (это программирование). К примеру, WordPress при нахождении на “текущей” странице, в хтмл-код автоматически добавляет к соответствующему пункту меню class=”current_page_item” и этот класс используется в CSS для выделения. В этом я ничем помочь не смогу, такая возможность зависит от используемого движка.
Ну что ж, почти понятно. Спасибо.
О SSI можно почитать тут http://ru.wikipedia.org/wiki/SSI_(программирование)
Там же примеры использования
Очень пользительная и удобная тема
Есть простое решение как такую кнопку выровнять по центру, а не прижимать влево?
Возможность зависит от разметки, в которой такая кнопка используется. Т.е. если конкретно отвечать на ваш вопрос, то нет.
Ну почему…если убрать флоат, задать жесткую ширину, то будут по центру =)
а ширину пересчитывать в зависимости от количества симвлов на кнопке… то это уже будет другая статья, отличающаяся от первоисточника How to make sexy buttons with CSS, использованного IMHO для написания этой статьи
Я начинающий верстальщик. Столкнулся для себя с нерешаемой проблемой.
Левая (короткая) створка двери у меня png-картинка с прозрачностью (через закругленный угол должен просвечиваться фон).
Правая (длинная) створка находится под короткой и просвечивается через прозрачные углы.
Посмотреть как это выглядит.
Пытался смещать отрицательным margin-ом левую створку так, чтобы она не перекрывалась с нижней. В FF и Opera все хорошо, а в IE левая створка исчезает (так как, видимо, вылазит за приделы внешнего блока).
HTML:
CSS:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
float:left;
background:url(../img/btn-r.png) no-repeat top right;
margin-left:50px;
}
#button a{
display:block;
background:url(../img/btn-l.png) left top no-repeat;
line-height: 34px;
padding-left: 5px;
padding-right: 5px;
color:#000000;
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
Что-то можно сделать, чтобы побороть эту проблему или нужно просто забить?
Уже спрошал про то как побороть траблы с ПНГ-шками…до сих пор тишина
Данная методика не подходит при использовании прозрачного фона. Либо такой вариант - подгонять ширину левой и правой части таким образом, чтобы фон одной не оказывался под прозрачными углами второй. Но это, скорее всего, не выход, т.к. длина текста может сильно отличаться.
Мда, фигово.
Это был бы вполне выход. Я бы с радостью его использовал. Но как это сделать? Я смещаю внутренний элемент (в моем случаем span) margin-ом влево на ширину узкой левой двери. При этом в FF и Opera все ОК, но в IE - происходит вышеописанная задница.
Может быть есть какой-то ход, чтобы и в IE все работало адекватно?
Я тут говорил про изображения, а не про теги, которые их используют.
:)
Ну да, действительно, спасибо.
И не смотря на то, что с png проблема, все равно статья отличная. Очень много для себя почерпнул. Буду продолжать читать ваш дневник. Большое вам спасибо.
Здравствуйте.
Не подскажите, как сделать, чтобы кнопки не “съезжали” при сужении браузера?
Например, поместить их в <div>, которому указать ширину.
Спасибо. Что-то не догадался сразу.
Спасибо за отличные кнопки 2 дня изобретал велосипед и тут на тебе такое!!! В полном восторге. Есть только один вопрос когда вставляешь ссылку в код, кнопка постоянно помещается на новую строчку, как сделать так чтобы кнопка оставалась в той же строке что и предыдущий текст. Пример - поле пароль после него в той же строке хочу сделать кнопку - не получается. она переносится на новую строчку.
Вариантов может быть несколько: либо сделать полю пароля inline: block, либо использовать float для обоих элементов, либо вообще позиционировать абсолютно.
наверное, имелось в виду
?
Верно. Я неправильно написал =)
ну вобщем почитал пост, автору еще раз респект и уважуха, неустаю удивлятся красоте, простоте и полезности блога :). Вот по быстрому набросал код для картинок .png, конечно код не претендует на звание самый оптимальный, так как я его побыстрому набросал. Но если кто доработает то все с удовольствием возьмут себе на заметку
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>png-link</title>
<link rel="stylesheet" type="text/css" href="all.css"/>
<!--[if lt IE 7]><link rel="stylesheet" type="text/css" href="css/lt7.css" media="screen"/><![endif]-->
</head>
<body>
<!-- wrapper -->
<div id="wrapper">
<a class="btn" href="#">
<strong>
<em>Link</em>
<span> </span>
</strong>
</a>
</div>
<!-- end wrapper -->
</body>
</html>
и css такой:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
background:#ccc; /*только для того чтобы было видно что картинка пнгешная*/
}
#wrapper{
width:200px;
overflow:hidden;
margin:50px auto 0; /*типа коекак спозиционировал по центру экрана чтобы лучше видно было*/
}
.btn{
float:left; /*заметьте что при флоате ненадо указывать еще и display:block; это будет лишний код*/
font:14px/18px Verdana, Tahoma, sans-serif;
text-decoration:none;
color:#fff;
overflow:hidden;/*обрезаем то что будет вылазить*/
position:relative;/*без этой строки overflow:hidden; несработает в ие6, так как фильтры "поднимают" слой*/
cursor:pointer;/*после подключения фильтров в ие6 курсор станет defolt, для избежания этого надначаем pointer*/
}
.btn strong{
float:left;
font-weight:normal;
position:relative;
padding:0 10px 0 0;
}
.btn em{
font-style:normal;
padding:0 0 2px 10px;
float:left;
background:url(../img/button.png) no-repeat;
}
.btn span{
width:500px;
height:80px;
position:absolute;/*аналогично флоату - при абсолюте ненадо добавлять лишний код display:block;*/
overflow:hidden;/*можна и без этого, но был замечен баг в подобной ситуации в сафари2 на маке*/
top:-20px;
right:0;
background:url(../img/button.png) no-repeat;
}
.btn:hover{
background:transparent;/*опять же таки для ие6, так как если ховер на ссылку неотработает то и на все внутренние елементы тоже, я выбрал такое свойство чтобы неменять визуально ничего другого в ссылке*/
}
.btn:hover em{
margin-top:-40px;
padding-top:40px;
}
.btn:hover span{
top:-60px;
}
Обратите внимание что высота ссылки 20px, и картинка для бекграунда и ховера - одна.
Она такова:
верхняя полоска - это простое состояние кнопки, вторая ниже в правом краю правая круглая часть кнопки, третяя полоска это ховерное состояние, и последняя нижняя часть - это правое ховерное заокругление.
я бы выложил пример да незнаю как :(
Ой, забыл добавить фильтры для ие6
2
3
4
5
6
7
8
background:none;
filter:progid:dximagetransform.microsoft.alphaimageloader(src='img/button.png', sizingMethod='crop');
}
.btn span{
background:none;
filter:progid:dximagetransform.microsoft.alphaimageloader(src='img/button.png', sizingMethod='crop');
}
Уважаемый автор, хочу вам сказать что я использовала ваш код, полностью без изменений и вся структура моей страницы поехала. У меня кнопки распологались горизонтально, каждая на своей высоте и расстояние справа/слева было плавающим.
Может подсткажете как устранить проблемы?
Без примера ничего не могу сказать.
Здравствуйте Dimox, мне очень понравилась ваша статья и я хотел бы спросить - какие дополнительные события onclick нужно добавить чтобы использовать такие графические кнопки в форме?
Для формы JavaScript, по-моему, вообще не нужен. Я уже и не помню, что имелось в виду в P.P.S.
Интересный пост! Можно еще используя JS. Описано тут: http://deadhorse.spb.ru/buttons-rounded-corners-javascript
Здравствуйте!
Пост интересный, частично пригодился.
Однако, ваша кнопка “с нажимом” в ИЕ всё-таки работает неправильно. Даже несмотря на то, что она никуда не ссылается.
Чтобы убедиться в этом, просто нажмите на неё, и не отпуская кнопки мыши, отведите курсор с кнопки и лишь затем отпустите мышь. Кнопка так и останется “нажатой”.
Смена onclick на onmouseup мне тоже не помогла.
onmouseup=”document.getElementById(”elID”).style.backgroundImage=’images/button.png’;”
Добавление этой строки в тек <a> почему-то не приводит к тому, что при событии onmouseup фоновый рисунок возвращается в “ненажатое” состояние.
Очень хотелось бы разобраться в этой проблеме! Спасибо.
Простите, там в строке ошибка. Я конечно же прописываю ‘elID’ в одинарных кавычках. Но всё равно не работает.
Здравствуйте!
Я сделал все по образцу и на кнопки делаю ссылки, но в Опере он не переходит по ссылкам нажатием левой клавиши, а только если открывать в новой вкладке! что делать?
заранее спасибо!
Покажите пример.
В ie8 есть проблема: заключенный внутрь ссылки блокирует действие пседвокласса :active, поэтому в отличии от 6 и 7 осла (где как ни странно все ок) эффекта нажатия не происходит( Долго искал как решить эту проблемку, но ничего другого не придумал, как через хак для 8-ки прикрепить новый бекграунд
Привет всем! Я не очень еще разобралась, как вообще программировать с использованием css. И в этом примере никак не могу разобраться. А мне очень срочно надо!((( для диплома. Кто сможет помочь, напишите, пожалуйста в аську - 395-668-611.
Большое спасибо за статью! Очень помогла! Столкнулся с css - оказалось ничего сложного!))) Все элементарно!
Спасибо за статью, очень полезна, как и остальные ваши статьи типа 3колончатого шаблона)
Но вот проблема возникла, что то не получается своими силами исправить
Хочу сделать вертикальное меню с помощью кнопок, но получаются какие то огромные отступы или вообще по 2 кнопки в строчку залазят
Есть ли способы борьбы с этим?
Вот пример
И еще
CSS:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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:
2
3
4
5
6
<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>
Добавьте в стили:
Спасибо, теперь каждая на своей строке, но отступы остались
И заметил еще более важную проблему, ссылки не работают с кнопок этих
Главная страница
Страницы существуют, но при нажатии на кнопку ничего не происходит
Отступы у вас указаны здесь:
2
3
4
margin: 12px 2px 15px 2px;
...
}
Из параметров ссылок удалите return false;.
Сам себе удивляюсь…вот что значит не внимательность! margin даже не заметил :) делал ведь сначала горизонтальное меню..
Благодарю, теперь все работает