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


кнопки css

С появлением технологии CSS3 расширились возможности веб-дизайнеров, позволяющие в ряде случаев при создание сайта заменить использование изображений на чистый CSS-код. Так например можно поступить с кнопками, хотя раньше нам мог помочь только PhotoShop.

На днях я увидел кнопки css которые нарисовал Dimox подчерпнув идею на англоязычном блоге PremiumPixels.com
С помощью CSS3 он “нарисовал” кнопоки, кодом которых я поделюсь в данной статье.
HTML-код кнопки будет таким:

Ниже приведены примеры кнопок. CSS-код понравившегося цвета кнопки вы можете скопировать из поля под соответствующей кнопкой.

Примеры кнопок


Понравился пост, подпишись на обновления

Понравилась статья? Получай свежие статьи первым по e-mail

[newsletter_signup_form id=0]

16 раз(а) написали о “Красивые 3D-кнопки с помощью CSS3

  1. У меня конечно небольшой опыт в создании сайтов, но скажите, почему вместо тега

    вы используете тег

    Ответить
    • Можно использовать и тег

      , но основная причина, по которой лучше использовать тег

      некорректное отображение в Opera

      Ответить
  2. Попробовала нарисовать кнопки, как написано в статье.Гораздо проще,чем пользовалась раньше.С фотошопом работать долго,а тут с помощью CSS3 все гораздо удобнее!

    Ответить
    • В фотошопе нарисовать такую кнопку займет времени ровно 2 минуты, если не меньше ))) Кнопка — градиент — текст.

      Но эта статья (как и все остальные) — довольно интересная. Надо пропробовать сделать такую кнопочку. Интересно, в старых браузерах будет работать? Много людей еще, как ни странно, пользуются IE6.

      Ответить
      • Работать будет, только как обычная кнопка. IE6 не понимает градиентов и обводку

        Ответить
  3. А как правильно вставлять линк на кнопочки?

    Ответить
  4. Можно прописать так

    Ответить
    • Если указать код:

      , кнопочка отлично работает в Opera, Chrome, Mozilla, но IE8 упорно не видит ссылку. А если убрать type=»submit» убивается форматирование, кнопка теряет фиксированную ширину и высоту.

      Ответить
      • Я не совсем понял что вы хотели написать, что бы вставить код пользуйтесь кнопками в баре «Code». Вы пробовали тот вариант ссылки что я прописал вам выше?

        Ответить
  5. Красивые, хорошие кнопки. Как радуга, на любой вкус. Почти на всех современных блогах именно такие кнопки можно наблюдать.

    Ответить
    • Вы что-то сделали не так. На этом блоге работают именно эти кнопки.

      Ответить
      • Добрый день! Еще вопрос! как сделать кнопку комментариев таким стилем?

        Ответить
        • Присваиваем кнопке для комментариев нужный класс css.

          Ответить
  6. Добрый день.
    Подскажите пожалуйста, как можно менять цвет данных кнопок (в каких строчках нужно поменять цвета).

    Ответить
  7. Добрый день.
    Подскажите пожалуйста, почему две разноцветные кнопки размещенные рядом стали одного цвета? Может код CSS необходимо разделить?

    Ответить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

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