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

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

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

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

  1. Вообщем сделал вот так. При наведении на кнопку картинка сьезжает вниз. Вот как мне сделать как у вас что-б она оставалась на месте? Какой параметр нужно крутить? Да я добавил фиксацию размера кнопок. Может это из-за этого?

    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. Надо тогда почитать руководство по CSS, чтобы знать какие параметры за что отвечают.

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

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

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

  6. 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. Автор, спасибо большое, именно то, что искал. Быстро и изящно ) правда кнопки графические не айс получились :) ну эт мелочи

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

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

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

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

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

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

    
    <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, спасибо за ответ.

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

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

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

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

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

  16. room,

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

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

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

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

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

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

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

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

    Левая (короткая) створка двери у меня 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:#000000;
    text-decoration:none;
    font-family:Verdana, Arial, Helvetica, sans-serif;

    }

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

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

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

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

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

        
        <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; }
        

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