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

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

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

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

  1. Сенькс, поставил себе. Только убрал пиксельный размер шрифта

  2. Спасибо! Классные кнопки получились. Возможно тоже у себя на блоге попробую поставить на комменты.

  3. Димокс, обалденно.
    Немедленно организую у себя.
    Ты прекрасен :)

  4. Отлично! приделаю себе… Спасибо большое

  5. Слушай, ты упомянул здесь свой скрипт для цитирования: не поделишься ли? (там каменты, как я понимаю, отключены) Очень хочется..

  6. Спасибо за кнопочки!
    Заюзал у себя на сайте!

  7. Результат понравился, возьму на заметку при обновлении дизайна.
    Единственное, можно было бы в самой статье хотя-бы один пример действующей кнопки (для большей наглядности). В действии результат заметно эффектнее, чем на картинке в начале.
    Спасибо!

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

    • В принципе да, хотя это не такой уж и существенный момент, для меня по крайней мере.

      • Тянуть в смысле кнопка растягивается на текст какой угодно длины? А я как раз пришла спросить, почему она у меня не тянется, а выстраивает текст в два ряда..

      • Ага.. у них фиксированная ширина.. Поняла, что к чему.
        Чисто теоретически: а низзя так, шобы кнопка сама автоматом сжималась/растягивалась в зависимости от длины текста на ей? :)

        • Можно конечно. Для этого нужно:

          1) Удалить:

          
          width: 120px;
          height: 32px;
          

          2) Добавить:

          display: inline-block;

          3) Поменять:

          padding: 0 0 2px;

          на:

          padding: 6px 15px 7px;
          • Вах! Спасибо!!!
            От теперь полный порядок :)

          • Дима, не совсем понял, зачем прописывали свойство

            display: inline-block; 

            ???

            • Хм, действительно, оно ведь здесь совсем не нужно. Браузер назначает его по умолчанию. Спасибо, что заметили =)

              • То есть этот параметр можно убрать?

                • Да. Но он будет нужен, если вы захотите, например, кнопку сделать из ссылки, т.е. тег <a> вместо <button>.

                  • Ага.. спасибо. Тогда не буду трогать, поскольку именно что буду юзать код ссылки, а не кнопки.
                    Хотя.. сейчас юзаю такой код:

                    <button "name="" type="submit" class="submityellow" onclick="location.href='http://...'">текст на кнопке</button>

                    а для него — нужен inline-block?

                    • Для разных элементов применяются разные значения Display.

                      Есть блочные элементы (p, div, h1-h6), которые по умолчанию имеют вид блока (display:block;) — т.е. растягиваются на всю ширину блока в котором они находятся.
                      При этом, то что находится после этого элемента, переносится на новую строку.

                      Есть элементы, которые не растягиваются (а, span, b, i, u, s) — ими можно выделять определенные участки блочных элементов. Вот как сейчас я выделяю жирным и курсивом названия этих тегов и правил CSS.
                      По умолчанию значения их свойства display: inline;
                      И если это свойство прописать для таких тегов как p, div, h1-h6 — они тоже не будут переноситься на новую строку.

                      А есть элементы которые и блочного типа, и в то же время не переносятся на новую строку, так как не принимают автоматически всю ширину блока, в котором они находятся. Это наши картинки — тег img.
                      И по умолчанию — значение их свойства display: inline-block;

                      Т.е. свойство display указывает браузеру, как он должен обрабатывать и отображать тег или селектор.

                      Яснее стало хоть? Или только еще больше запутал? :)

                      По поводу ссылки a — не обязательно делать его display: inline-block; Достаточно указать поля сверху и снизу, и она автоматически будет принимать размер с учетом содержимого и величины шрифта.

                      Я именно так и реализовал. ;)

                    • Дима, там у тебя Allpa спрашивала про это свойство, и я нажал ответить, но по ходу не нажал :)
                      И у меня этот коммент здесь ни к лесу ни к полю.
                      Я сделаю его дубликат ответом Allpa, а ты этот коммент и тот который выше удали плиз.
                      Сор за спам :)

  9. Очень красивая кнопочка получается, на премиум сайтах почти все всегда лучшее :)

  10. PIE.htc разве не должен решить проблемы с ie ?

  11. Давно использую подобное, правда, каждый раз вспоминаю о бедных юзерах IE. Жалко их.

  12. Помнится, впервые такого типа кнопки представил вебмастерам буржуйский верстальщик tjrus. В избранное однозначно, долой картинге!

  13. Спасибо Димокс!
    Тут вреде ошибочка вкралась
    .submit::-moz-focus-inner{border:0}

  14. Красявишно, надо попробовать.

  15. Отличные кнопки! Спасибо, будем юзать)

  16. А как вставить ссылку? В кнопку?

  17. Спасибо большое! Шикарные кнопки…

  18. 10 вариантов? по мне, так 1))

  19. Ух ты а серая кнопка подойдет и для моего скучного и серого сайта! Забираю! Да спасибо!

  20. Разработчик денежных сайтов
    7 лет назад

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

Ваш комментарий