Главная › CSS-верстка

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

153 комментария

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

Чем привлекательны CSS - тем, что они часто, при создании тех или иных эффектов, позволяют заменить JavaScript. Вот и на этот раз каскадные таблицы стилей помогут нам сконструировать красивые динамические кнопочки. Информацию, изложенную ниже, можно рассматривать как альтернативу способу создания универсальных графических кнопок и данный ...

Смотрите также

Создание универсальных графических кнопок с помощью CSS

18 комментариев

Вольный перевод статьи «Creating bulletproof graphic link buttons with CSS» (мои комментарии — курсивом). Проблема в CSS, с которой я боролся в последнее время, — как создать универсальную графическую кнопку. Имеется в виду кнопка с использованием изображения, которая ...

Красивые 3D-кнопки с помощью CSS3

56 комментариев

Замечательная технология CSS3 позволяет в ряде случаев при оформлении сайта отказаться от использования изображений, которые заменяет чистый CSS-код. К примеру, подобным образом можно поступить с какими-либо кнопками, используемыми на сайте. Есть один замечательный дизайнерский англоязычный ...

Скрипт: hover-эффект для любого элемента в Internet Explorer 6

29 комментариев

В свете предложенных дополнительных вариантов скрипта, так сказать, на все случаи жизни, в комментариях к статье «Простейший скрипт для реализации hover-эффекта для любого элемента в Internet Explorer 6», а также развернувшихся там же баталий, я решил реинкарнировать данную ...

Простейший скрипт для реализации hover-эффекта для любого элемента в Internet Explorer 6

62 комментария

Внимание: рекомендуется обновленная версия данной статьи. Несмотря на то, что данное решение уже опубликовано в РУнете не мной, я просто не могу не написать о нем, т.к. решение, на мой взгляд, достойно внимания, и нужно его популяризовать посредством моего ...

Комментарии (153)

  1. 3cc3ntr1c
    15 лет 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 */
    }

  2. Dimox
    15 лет 2 месяца назад

    Надо тогда почитать руководство по CSS, чтобы знать какие параметры за что отвечают.

  3. 3cc3ntr1c
    15 лет 2 месяца назад

    Простите за назойливость. Вы не подскжите как зафиксировать такую кнопку и для Експлорера? В Опере размер фиксируется, а в Експлорере растягивается или сужается под текст.

  4. Dimox
    15 лет 2 месяца назад

    Для этого есть параметр width.

  5. 3cc3ntr1c
    15 лет 2 месяца назад

    Да, это я знаю. И я поставил его в код. Только в Опере кнопки зафиксировались, а в Експлорере увы нет.

  6. Aksu
    15 лет 2 месяца назад

    Dimox, отличный урок! спасибо.

    от себя добавлю:
    для IE помимо обработчика события onmouseup следует ещё добавить onMouseOut.
    т.к. если зажать и затем разжать мышку вне зоны кнопки (click and drag), стиль active также застопорится. в данном случае, кстати, мы не переходим по ссылке и кнопка остаётся в состоянии active.

    PS обработчик onclip в вышеизложенном не нуждается

    <a href="#" onmouseup="this.blur(); return false;"  onMouseOut="this.blur(); return false;">text01</a>
  7. linur
    14 лет 9 месяцев назад

    Автор, спасибо большое, именно то, что искал. Быстро и изящно) правда кнопки графические не айс получились :) ну эт мелочи

  8. Akill
    14 лет 8 месяцев назад

    Спасибо за пример, очень приятная тема… но, есть один маленький ньюанс
    Если используетсо *.png с фильтром прозрачности (filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='your_img.png');), то в ИЕ6−7 кнопка просто разваливается…
    Как побороть пока не нашел, буду благодарен если кто-то сталкивался и может поделиться решением

  9. Технолог
    14 лет 8 месяцев назад

    Спасибо, сделал по предложенному рецепту вкладки страниц вверху своего сайта techvesti.ru
    Спасибо.

  10. room
    14 лет 8 месяцев назад

    Технолог, подскажите каким образом у Вас получилось так, что при нахождении на странице сайта выделена цветом соответствующая кнопка меню?
    Спасибо

  11. Dimox
    14 лет 8 месяцев назад

    room, это функция движка, которая используется на том сайте. К пункту меню, который соответствует текущей странице, приписывается заданный CSS-класс.

  12. room
    14 лет 8 месяцев назад

    Dimox, спасибо за ответ. Это я понял. Более того, как это должно происходить я вычитал здесь (пункт 10): www.realcoding.net/article/view/4830,
    но из-за своей криворукости и полного отсутствия навыков, воплотить в действительность не могу. Чего только не творил — результат ноль. Может поможете (если не затруднит)?
    Спасибо.

  13. room
    14 лет 8 месяцев назад

    зы На всякий случай, вот моё меню:

    <head>
<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>
    • Dimox
      14 лет 8 месяцев назад / ответ на коммент room

      Посмотрел с картинками. Стили работают, как надо. Не понимаю, в чем проблема.

      • room
        14 лет 8 месяцев назад / ответ на коммент Dimox

        Dimox, спасибо за ответ.

        Реализация самого меню с кнопками только средствами CSS, как Вы уже заметили, прошла успешно (накачал уйму вариантов).
        Для меня проблемой стала «подсветка» пункта меню при нахождении «юзера» на соответствующей странице сайта.
        Т. е., если «юзер» находится на «Главной странице» — «светится» кнопка «Главная» в меню (т.е., в моём случае, активна картинка 2. gif). При переходе на следующую страницу «Фотки» — кнопка меню «Фотки» (и т.д.). Реализация данного действа с применением .a link, hover, visited {color#} только до первого клика мышкой.
        Один из вариантов такого решения — это присвоение соответствующего id в тэге body каждой странице (т.е. [body id="main"]) и, далее, создание класса для кнопок меню (или что-то в этом роде). Но ввиду того, что в CSS я, мягко выражаясь, полный профан (как не трудно догадаться), прошу Вас, если не затруднит, помочь мне решить эту проблему.
        Спасибо.

        • Dimox
          14 лет 8 месяцев назад / ответ на коммент room

          То, что вы хотите сделать, решается на уровне движка сайта (это программирование). К примеру, WordPress при нахождении на «текущей» странице, в хтмл-код автоматически добавляет к соответствующему пункту меню class="current_page_item" и этот класс используется в CSS для выделения. В этом я ничем помочь не смогу, такая возможность зависит от используемого движка.

  14. Akill
    14 лет 8 месяцев назад

    room, Можно попробовать через SSI указывать… енто делаетсо довольно просто… главное чтоб хостинг поддерживал

    ЗЫ: Неужто никто не сталкивался с проблеммой, которую я описал выше? =(

  15. room
    14 лет 8 месяцев назад

    Akill, спасибо за ответ, но что такое SSI я пока не знаю (

  16. Dimox
    14 лет 8 месяцев назад

    room,

    На всякий случай, вот моё меню:

    Без картинок мне не видно результата.

    • room
      14 лет 8 месяцев назад / ответ на коммент Dimox

      Здравствуйте Dimox.
      Мои кнопки:
      back.gif — полоска, на которой лежат кнопки;
      0.gif — кнопка в нормальном состоянии;
      1.gif — курсор над кнопкой;
      2.gif — нажатая кнопка (видимо — class="current").

  17. room
    14 лет 8 месяцев назад

    зы. Спасибо за непосылание :)

  18. rumax
    14 лет 7 месяцев назад

    Есть простое решение как такую кнопку выровнять по центру, а не прижимать влево?

  19. Akill
    14 лет 7 месяцев назад

    Ну почему… если убрать флоат, задать жесткую ширину, то будут по центру =)

    • rumax
      14 лет 7 месяцев назад / ответ на коммент Akill

      а ширину пересчитывать в зависимости от количества симвлов на кнопке… то это уже будет другая статья, отличающаяся от первоисточника How to make sexy buttons with CSS, использованного IMHO для написания этой статьи

  20. Андрей
    14 лет 5 месяцев назад

    Я начинающий верстальщик. Столкнулся для себя с нерешаемой проблемой.

    Левая (короткая) створка двери у меня png-картинка с прозрачностью (через закругленный угол должен просвечиваться фон).

    Правая (длинная) створка находится под короткой и просвечивается через прозрачные углы.
    Посмотреть как это выглядит.

    Пытался смещать отрицательным margin-ом левую створку так, чтобы она не перекрывалась с нижней. В FF и Opera все хорошо, а в IE левая створка исчезает (так как, видимо, вылазит за приделы внешнего блока).

    HTML:

    <span id="button"><a href="#">Экскурсии</a></span>

    CSS:

    #button{
    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:#0;
    text-decoration:none;
    font-family:Verdana, Arial, Helvetica, sans-serif;

    }

    Что-то можно сделать, чтобы побороть эту проблему или нужно просто забить?

    • Dimox
      14 лет 5 месяцев назад / ответ на коммент Андрей

      Данная методика не подходит при использовании прозрачного фона. Либо такой вариант — подгонять ширину левой и правой части таким образом, чтобы фон одной не оказывался под прозрачными углами второй. Но это, скорее всего, не выход, т.к. длина текста может сильно отличаться.

      • Андрей
        14 лет 5 месяцев назад / ответ на коммент Dimox

        Это был бы вполне выход. Я бы с радостью его использовал. Но как это сделать? Я смещаю внутренний элемент (в моем случаем span) margin-ом влево на ширину узкой левой двери. При этом в FF и Opera все ОК, но в IE — происходит вышеописанная задница.

        Может быть есть какой-то ход, чтобы и в IE все работало адекватно?

      • Nadyushka
        13 лет назад / ответ на коммент Dimox

        Для того, чтобы углы были прозрачными, надо использовать дополнительный вложенный тэг. Вот как это выглядит у меня:

        <a href="#" onmouseup="this.blur();"  onMouseOut="this.blur();">
    <span><span>Название кнопки</span></span>
</a>

        Девять изображений для бэкграундов расположены в спрайте сверху вниз.

        .butt-green a { display: block; float: left;
  font-size: 13px; font-weight: bold; color: #f7fe32; text-decoration: none;
  background: url(../images/green-butt.png) 0px -35px no-repeat; outline: none;}
.butt-green a span { display: block; padding: 0px 5px;
  background: url(../images/green-butt.png) 100% -70px no-repeat; }
.butt-green a span span { line-height: 31px; /*height: 31px;*/ padding: 0px 15px 1px 15px; cursor: pointer;
  background: #579d21 url(../images/green-butt.png) 0px 0px repeat-x; }

.butt-green a:hover  { background-position: 0px -140px; text-decoration: none; }
.butt-green a:hover span { background-position: 100% -175px; color: #f7fe32; text-decoration: none; }
.butt-green a:hover span span { background-position: 0px -105px; background-color: #6fc030; }

.butt-green a:active { background-position: 0px -245px; text-decoration: none; }
.butt-green a:active span { background-position: 100% -280px; color: #f7fe32; text-decoration: none; }
.butt-green a:active span span { background-position: 0px -210px; background-color: #29800a; padding: 1px 14px 0px 16px; }

        Извиняюсь, что много лишнего в стилях — пример из реального проекта, чистить некогда.