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

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

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

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

  1. В соответствии со спецификацией, в 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

    Хотя помню, что сам где то так делал))

    Спасибо за статью как раз пригодилась для конкретного проекта.

  2. Спасибо за подсказку. Исправил и приму к сведению.

    За статью пожалуйста. Рад, что она помогла.

  3. Очень познавательно, однако, я столкнулся с такой проблемой:

    [cc lang=»html»][/cc]

    при событии onclick выполняется код JavaScript, но не переход по ссылке. Для того чтоб всё работало, я заменил событие onclick на событие onmouseup.
    На этой странице кнопка работает, но если скопировать код кнопки в отдельный докумнт, происходит описанное выше. Объясните пожалуйста, что я не так сделал?

  4. sk0t, по сути, ни событие onclick, ни событие onmouseup нам вообще не нужны, поскольку отжима кнопки при клике просто можно не успеть увидеть — в этот момент может загружаться другая страница, все зависит от задержки между кликом по кнопке и началом загрузки данных.

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

    А здесь кнопка работает потому, что она ссылается на эту же страницу и ничего больше не загружает.

  5. Спасибо за разъяснение.
    Только у меня ссылка вела на исполняемый файл(HTML-Autorun) и возвращение кнопки в нормальное состояние было для меня актуальным.

  6. Тогда, видимо, вам нужно поступать, как я и говорил — использовать комбинацию onclick, которая в примере, + код ява-скрипта, который бы запускал этот файл.

  7. Отличный сайт, Dimox!

    Трудно было оставить комментарий, поскольку картинка с буквами закэшировалась, но очень хотелось похвалить!

    Молодец!!!

  8. Спасибо, Сергей, очень приятно!

  9. Сделал для input`ов, но в ИЕ криво работает, т.е. нет при наведении подсветки, не подскажите?, вот что получилось:

    
    input.button{
      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;
    }
    

    использовать так:

    
    <form>
    <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>
    
  10. DeadLy, ответ прост — IE версии 6.0 и ниже не воспринимает псевдо-класс :hover для всех элементов, кроме тега <a>. Для решения этой проблемы советую прочитать статью CSS:hover для любого элемента.

  11. Dimox, спасибо, но я behavior’ом решил не заморачиватся, решил проблему вот так:

    
    <style type="text/css">
    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>
    
    
    <form action="test.php" method="GET">
    <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>
    
  12. DeadLy, вот и замечательно. Только есть минус в этом варианте — HTML-код не валидный.

  13. когда придумаю полностью валидный код — напишу сюда ))

  14. Dimox, спасибо за статью, очень подробно и по делу! Хотел бы еще добавить вот чего: ие6 при наведении курсора загружает картинку с сервера по-новой — так называемый IE flickering bug. И дело даже не в трафике :), а в том, что на время загрузки картинки фон пропадает. Я сделал так: обернул ссылки в контейнеры (подошли li), которым в качестве фона задал ту же картинку в дефолтном положении. И хоть ие все равно ломится на сервер, мерцания уже не наблюдается.

  15. Пожалуйста, juice.

    Ну, ИЕ как всегда отличился :))). Спасибо за информацию, приму к сведению.

  16. Виктор Орлов
    12 лет назад

    Здравствуйте! Огромное спасибо Вам за эту замечательную статью.
    CSS только начинаю изучать. поэтому куча вопросов:
    Подскажите, а как прижать кнопку в верхний левый угол?
    вот мой код:

    
    a.button {
      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;
    }
    
    
    <a href="" class="button" onclick="this.blur(); return false;"><span><img src="/new/images/unvisible.gif" border="0" width="97" height="49"></span></a>
    

    Еще раз огромное спасибо!

  17. Виктор, я вижу, что по ссылке http://probegauto.ru/new/, которую вы давали, все в порядке. Вопрос еще актуален?

  18. Виктор Орлов
    12 лет назад

    Все в норме. Оказывается в css разрешены отрицательные координаты
    top: -10px решили проблему.
    Спасибо.
    Теперь возник еще один вопрос. Ответ на него будет интересен многим.
    Если взять за вариант — изготовление css меню, то какими средствами (видимо JavaScript) подсвечивать выбранный ранее пункт меню?
    Представим себе:
    Выбираем кнопку меню ГЛАВНАЯ,
    загружается Главная страница и кнопка меню ГЛАВНАЯ подсвечивается,
    что указывает на факт нахождения именно на странице ГЛАВНАЯ.
    Как этого добиться?
    Немного сумбурно, но вполне понятно.

  19. Замечательно, что разобрались.

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

    С помощью JavaScript, наверное тоже такое возможно, только я не знаю как.

    Т.е. вам нужно исходить из того, каким образом создаются страницы.

  20. Поборол я проблему.

    Сначала описываем еще один класс:

    
    a.buttonactive {
      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;
    }
    
    
    $spn=basename($_SERVER['SCRIPT_FILENAME']); //Имя страницы
    
    Теперь ссылки на страницы:
    $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 сделать ширину выводимой кнопки фиксированной? Чтобы размер не зависел от количества символов надписи…