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

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

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

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

  1. Всё это прекрасно, но как сделать так, чтобы переходить на какую-нибудь страницу, нажимая по этой динамической кнопке?

  2. Спасибо вам огромное! Весь интернет излазил, кнопочку хотел сделать))
    теперь, надеюсь, проблем не будет)

  3. Скажите, пожалуйста, а как сделать, чтоб кнопка менялась при нажатии на кнопку мыши а не при наведении???

  4. Dimox
    у меня тут вопрос возник. Занялся кроссбраузерностью, по корявости отображения ИЕ впереди планеты всей, что с этим сделать можно?
    Да и опера не вполне нормально отображает нажатие на кнопку

    • по корявости отображения ИЕ впереди планеты всей, что с этим сделать можно?

      Забить на него или почитать эту статью, может пригодится.

      Да и опера не вполне нормально отображает нажатие на кнопку

      Странно, конечно. На момент написания статьи все работало.

  5. Dimox, если скрестить динамически кнопки с табами jQuery, т.е.

    <li class="current"><a href="#" class="button"><span>1-я вкладка</span></a></li>
    <li><a href="#" class="button"><span>2-я вкладка</span></a></li>

    Насколько это рабочий вариант и будет ли правильным такое решение? Я попробую сделать, но хотелось бы услышать ваше мнение. Преследуется цель сделать табы из графических кнопок под разную длину текста.

  6. Если без

    a

    , то придется использовать скрипт для ИЕ6?

  7. спасибо огромное за блог, очень много информации для начинающего)) очень обстоятельно и детально, спасибо!

    заметил баг в firefox с такими кнопками — если навести мышь на кнопку, нажать, а потом удерживая нажатой увести с кнопки, то кнопка останется нажатой.
    ну и конечно в ie8 кнопка не нажимается :active не работает похоже((

  8. простите за спам, но мб. поможет решить проблему — проверил кнопку в опере — проблема та же, что и в 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) наведение мышки —

            :hover

            2) нажатие мышки (утапливание) —

            :active

            3) переход по ссылке на которую ведет кнопка —

            .active

            У меня в опере не срабатывает 2) эффект если нажимать на левую створку — кнопка не утапливается.
            А у Вас?

            А переход по ссылке починил, теперь работает корректно, спасибо за подсказку! Но вот 2-й эффект не удалось заставвить работать.

  9. нашел решение для ie8 и opera > v11. Добавить в пустой div с таким стилем:
    position:absolute;top:0px;width:100%; height:33px;
    где height:33px как понимаете высота вашей кнопки. После этого везде нажимается.

  10. Николай
    10 лет назад

    все разобрался, если продублировать :focus к тем же событиям, что описаны по :active то срабатывает во всех броузерах включая explorer и opera! В том числе срабатывает и кнопка из примера при нажатии на любую створку.

    можно удалить 2 моих предудущих поста, простите за спам

  11. Николай
    10 лет назад

    странно…
    у меня отжимается вроде вот файл из примера на котором тренировался: (http://ifolder.ru/25958855) проверял в опере 11.51 и explorer 8.0 (в хроме и файрфоксе работало и раньше). А вы в каком броузере смотрите?

    Еще выше ссылку давал, там тоже можно посмотреть.

    • Понял, в чем причина. В статье у кнопки я добавил параметр onclick="this.blur(); return false;", который как раз за отжим и отвечает. А при тестировании на новой странице я забыл его вставить.

      Спасибо что помогли разобраться. Надо будет обновить статью.

  12. Спасибо, как раз то что искал. Только немного доработал под свои нужды, чтобы span накладывался на ссылку, т.е. перекрывал текст.

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

    <a href="uk/index_uk.html" title="Enter" rel="nofollow"></a>

    вроде все выглядит отлично и в браузерах работает, кроме IE.
    в чем может быть причина и что сделать?
    благодарю заранее за ответ.

  14. Спасибо Dimox! Я как раз делаю сейчас онлайн кинотеатр, и мне эта кнопка ооочень пригодилась!!!