Главная›CSS-верстка

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

56 комментариев

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

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

Есть один замечательный дизайнерский англоязычный блог PremiumPixels.com, автор которого бесплатно делится красивыми элементами интерфейса для сайтов. Мне очень нравится стиль этого дизайнера, он рисует обалденно. Я уже неоднократно использовал на своих блогах его полезняшки, и одной из этих полезняшек стал набор красивых 3D-кнопок.

С помощью CSS3 я “нарисовал” практически копии этих кнопок, кодом которых и поделюсь в данной статье.

HTML

HTML-код кнопки будет таким:

<button name="" type="submit" class="submit">Отправить</button>

Можно было бы использовать и тег <input>, но есть 2 причины, по которым в данном случае лучше будет задействовать тег <button>:

  1. В Опере на input’е не работает свойство text-shadow;
  2. В Опере у input-кнопки появляется черная обводка, если есть фокус в одном из полей формы, что делает кнопку некрасивой.

Примеры

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

Также пример такой кнопки вы можете наблюдать в форме добавления комментария на данном блоге.

Особенности

  • Каждая кнопка имеет 3 состояния: по умолчанию, при наведении курсора мыши и при клике.
  • Полноценно (т.е. так, как и задумывалось) кнопки отображаются в браузерах Opera, Firefox, Chrome, Safari. В Internet Explorer 9 отсутствуют закругления углов, внутренняя обводка и тень у текста (поскольку эти свойства он не поддерживает). Несмотря на это, в IE9 кнопки выглядят неплохо. В IE8 и версиях ниже также отсутствует объемность кнопки, но в них, по крайней мере, есть градиенты.
  • Для создания градиентов я воспользовался удобным сервисом Ultimate CSS Gradient Generator.
  • Если сравнивать место, занимаемое на сервере, между кнопкой, созданной в виде изображения, и кнопкой, созданной на чистом CSS-коде, то разница получается несущественная – плюс-минус 1 Кб. Однако при этом кнопка на CSS3 позволяет снизить количество запросов к серверу на 1, что, несомненно, является плюсом.

В итоге, несмотря на отсутствие поддержки в браузерах Internet Explorer ряда CSS-свойств, я считаю, что 3D-кнопки, оформленные подобным образом с помощью CSS3, можно смело использовать на своих сайтах, ведь на их юзабилити это никак не сказывается, а пользователи IE лишены лишь возможности наблюдать все прелести современных веб-технологий.

Смотрите также

Верстка красивых тегов для сайта + бонус

25 комментариев

Замечательный дизайнер Orman Clark однажды представил своим читателям очень красивый дизайн облака тегов, который я использовал на одном моем сайте. Расскажу, как сверстать такие теги для вашего сайта. Для начала ...

Элегантная форма авторизации с использованием CSS3

38 комментариев

Продолжаю делиться версткой элементов интерфейса для сайтов. Как и в своей предыдущей статье, я взял интересный пример с сайта PremiumPixels.com и сверстал его, используя CSS3. На этот раз это форма ...

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

153 комментария

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

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

  1. ПафНутиЙ
    3 января 2012 г. в 19:29

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

    1. Dimox
      3 января 2012 г. в 20:30 / ответ на коммент ПафНутиЙ

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

      1. Allpa
        9 января 2012 г. в 06:40 / ответ на коммент Dimox

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

      2. Allpa
        9 января 2012 г. в 06:47 / ответ на коммент Dimox

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

        1. Dimox
          9 января 2012 г. в 11:09 / ответ на коммент Allpa

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

          1) Удалить:

          width: 120px;
height: 32px;

          2) Добавить:

          display: inline-block;

          3) Поменять:

          padding: 0 0 2px;

          на:

          padding: 6px 15px 7px;
          1. Allpa
            9 января 2012 г. в 21:42 / ответ на коммент Dimox

            Вах! Спасибо!!!
            От теперь полный порядок :)

          2. Серёга Кольт
            12 января 2012 г. в 21:05 / ответ на коммент Dimox

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

            display: inline-block;

            ???

            1. Dimox
              12 января 2012 г. в 21:15 / ответ на коммент Серёга Кольт

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

              1. Allpa
                13 января 2012 г. в 00:59 / ответ на коммент Dimox

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

                1. Dimox
                  13 января 2012 г. в 11:25 / ответ на коммент Allpa

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

                  1. Allpa
                    13 января 2012 г. в 21:16 / ответ на коммент Dimox

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

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

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

                    1. Dimox
                      13 января 2012 г. в 22:35 / ответ на коммент Allpa

                      Не нужен.

                    2. Серёга Кольт
                      16 января 2012 г. в 15:22 / ответ на коммент Allpa

                      Для разных элементов применяются разные значения 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; Достаточно указать поля сверху и снизу, и она автоматически будет принимать размер с учетом содержимого и величины шрифта.

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

                      1. Серёга Кольт
                        16 января 2012 г. в 16:15 / ответ на коммент Серёга Кольт

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

  2. Creidive
    4 января 2012 г. в 17:03

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

  3. divone
    4 января 2012 г. в 17:23

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

    1. Dimox
      4 января 2012 г. в 18:05 / ответ на коммент divone

      Возможно. Не люблю использовать такие скрипты.

      1. Серёга Кольт
        12 января 2012 г. в 20:59 / ответ на коммент Dimox

        Дима, спасибо, кнопки поставил у себя на сайте – отличненько смотрится.
        Правда со своим градиентом.
        Потом напишу статью о сайте где кину на тебя ссылку.

        По поводу PIE – если его подключить, то появляется тень, градиент и все округляется, НО!
        В IE7 сбивается центрирование текста, отступы и кнопки становятся очень высокими, короче – я его отключил, ибо это НЕЧТО отдаленно похожее на кнопку, за то с тенью и градиентом :)

        1. Dimox
          12 января 2012 г. в 21:10 / ответ на коммент Серёга Кольт

          Да, подобные скрипты-костыли одно лечат, а другое калечат =)

          1. Серёга Кольт
            12 января 2012 г. в 23:00 / ответ на коммент Dimox

            Просто Максим по умолчанию этот PIE засунул в систему, я его всегда удаляю.

  4. Владимир
    5 января 2012 г. в 14:03

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

    1. Серёга Кольт
      5 января 2012 г. в 18:37 / ответ на коммент Владимир

      Чего их жалеть?
      Если человек лениться перейти на лучшее решение – пускай сидит и довольствуется косяками :)

      Спасибо за кнопки, делаю шаблон на MaxSite CMS – как раз будет где применить.

  5. FPI
    6 января 2012 г. в 01:28

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

  6. Михаил
    6 января 2012 г. в 14:34

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

    1. Dimox
      6 января 2012 г. в 14:48 / ответ на коммент Михаил

      Нет, все правильно.

  7. Sonikelf
    15 января 2012 г. в 18:42

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

    1. Sonikelf
      15 января 2012 г. в 18:42 / ответ на коммент Sonikelf

      Точно-точно надо :)

      1. Dimox
        15 января 2012 г. в 18:56 / ответ на коммент Sonikelf

        =)

  8. TheMacros
    28 января 2012 г. в 23:56

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

  9. Тарон
    13 апреля 2012 г. в 00:02

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

    1. Dimox
      13 апреля 2012 г. в 09:53 / ответ на коммент Тарон

      Вместо тега button используйте тег a.

      1. Тарон
        14 апреля 2012 г. в 00:47 / ответ на коммент Dimox

        Спасибо=) Мне нужно было попробовать, а потом спросить. Но я был уверен, что не получиться.

  10. Александр
    12 мая 2012 г. в 13:58

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

  11. Дмитрий
    3 июля 2012 г. в 23:10

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

  12. Ринат
    7 сентября 2012 г. в 22:33

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

  13. Разработчик денежных сайтов
    30 сентября 2012 г. в 09:25

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

  14. Александр
    17 марта 2013 г. в 00:57

    Подскажите пожалуйста, вроде все правильно сделал, а отображается коряво!
    Изображение http://SSMaker.ru/3a0802d5/

    1. Dimox
      17 марта 2013 г. в 10:54 / ответ на коммент Александр

      Значит что-то не то делаете.

  15. Андрей
    16 августа 2013 г. в 07:30

    Здравствуйте!
    А есть ли возможность внедрить Ваши кнопки в XML-файл на флеш-сайт?
    Спасибо.

    1. Dimox
      16 августа 2013 г. в 09:06 / ответ на коммент Андрей

      Не представляю, я во флеше не разбираюсь.

  16. Максим
    16 марта 2014 г. в 11:26

    Добрый день. Здорово получились кнопочки))
    Неплохо было бы изображение с ссылками при наведении.

  17. Виталий
    21 апреля 2014 г. в 15:09

    Спасибо! Очень круто! (=

  18. Роман
    19 июня 2014 г. в 23:22

    Супер, спасибо за кнопки – вот пример http://toursector.org.ua/lechenie-v-truskavce/
    Еще что супер, что их можно подстраивать под себя

  19. Сергей
    5 марта 2016 г. в 19:09

    Добрый день.
    Я Разместил пару таких кнопок на сайте, они должны быть разного цвета (первая -оранжевая, вторая-зеленая). Однако как только разместил код второй кнопки они обе сразу стали зеленого цвета, кроме того самопроизвольно изменилась кнопка “отправить комментарий” по сайту , она стала похожа на первую кнопку (цвет и размер).
    Я новичок в CSS, однако судя по всему, в коде кнопки указаны общие правила для всех кнопок, что и привело к изменениям кнопок. Пробовал использовать параметр !important, однако без толку.

    Хотелось бы сделать еще десятка полтора разноцветных подобных кнопок на сайте.

    1. Dimox
      5 марта 2016 г. в 22:42 / ответ на коммент Сергей

      Используйте уникальные классы для разные кнопок, т.е. вместо .submit, например, .submit1 и .submit2 и т.д. И этим классам пропишите код соответствующих кнопок из примеров.

      1. Сергей
        6 марта 2016 г. в 20:30 / ответ на коммент Dimox

        Спасибо за оперативный ответ. Там действительно было в html: .submit1 и .submit2, а в CSS: .submit и .submit1.
        А каким образом можно изменить цвет и оттенки кнопки на другие, более насыщенные? как я понимаю в коде их три-самой кнопки, при подведении курсора и градиент по периметру.

        1. Dimox
          6 марта 2016 г. в 20:34 / ответ на коммент Сергей

          А каким образом можно изменить цвет и оттенки кнопки на другие, более насыщенные?

          Получить код нужного цвета с помощью какой-либо программы по подбору цвета.

  20. Сергей
    27 марта 2016 г. в 10:32

    Добрый день, Dimox.
    Я наверно не совсем корректно выразился. На сайте http://vsr-kemerovo.cerkov.ru/, были размещены мной несколько кнопок. Так как кнопки желтого цвета не было, они были сделаны по аналогии, ориентируясь на сайт http://web-first-step.ru/css_push_button/ из двух оттенков желтого. Однако они получились с “недоделкой” – при подведении курсора меняется цвет верхняя граница кнопки и отсутствие перелива при проведении курсора (я не смог понять какие части кода за них отвечают).
    Код кнопки:

    /*Кнопка "ПРАВОСЛАВНАЯ ДИЕТА"*/
.submit20 {
	width: 202px;
	height: 45px;
	padding: 0 0 2px;
	font: 16px "Trebuchet MS", Tahoma, Arial, sans-serif;
	outline: none;
	position: relative;
	cursor: pointer;
	border-radius: 10px;
	color: #000000;
	text-shadow: 1px 1px #FFFF00;
	border: 1px solid #FFFF00;
	border-top: 1px solid #FFFF00;
	border-bottom: 1px solid #FFFF00;
	box-shadow: inset 0 1px #CDCD00, inset 1px 0 #CDCD00, inset -1px 0 #CDCD00, inset 0 -1px #CDCD00, 0 2px #CDCD00, 0 3px #CDCD00, 0 4px 2px rgba(0,0,0,0.4);
	background: -moz-linear-gradient(top,#FFFF00 0%,#CDCD00 100%);
/* FF3.6+ */
	background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#FFFF00),color-stop(100%,#CDCD00));
/* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,#FFFF00 0%,#CDCD00 100%);
/* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,#FFFF00 0%,#CDCD00 100%);
/* Opera 11.10+ */
	background: -ms-linear-gradient(top,#FFFF00 0%,#CDCD00 100%);
/* IE10+ */
	background: linear-gradient(top,#FFFF00 0%,#CDCD00 100%);
/* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFF00',endColorstr='#CDCD00',GradientType=0);
/* IE6-9 */
	background-color: #FFFF00;
}

.submit20::-moz-focus-inner {
	border: 0;
}

.submit20:hover {
	border-top: 1px solid #CDCD00;
	box-shadow: inset 0 1px #CDCD00, inset 1px 0 #CDCD00, inset -1px 0 #CDCD00, inset 0 -1px #CDCD00, 0 2px #CDCD00, 0 3px #CDCD00, 0 4px 2px rgba(0,0,0,0.4);
	background: -moz-linear-gradient(top,#FFFF00 0%,#CDCD00 100%);
/* FF3.6+ */
	background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#FFFF00),color-stop(100%,#CDCD00));
/* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,#FFFF00 0%,#CDCD00 100%);
/* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,#FFFF00 0%,#CDCD00 100%);
/* Opera 11.10+ */
	background: -ms-linear-gradient(top,#FFFF00 0%,#CDCD00 100%);
/* IE10+ */
	background: linear-gradient(top,#FFFF00 0%,#CDCD00 100%);
/* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFF00',endColorstr='#CDCD00',GradientType=0);
/* IE6-9 */
	background-color: #FFFF00;
}

.submit20:active {
	top: 3px;
	border: 1px solid #CDCD00;
	border-top: 1px solid #CDCD00;
	border-bottom: 1px solid #CDCD00;
	background: #CDCD00;
	box-shadow: inset 0 1px 2px #CDCD00;
}

    Ps.: Риторический вопрос-возможно ли сделать аналогичную кнопку (название кнопки делится на 2-3 изображения меняющихся через определенное время как в gif анимации, ведь кнопка и текст между собой не имеют жесткой связи?), а все остальные эффекты оставить без изменений?

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

Жирный текст

Ссылка

Цитата

Внутристрочный код

CSS-код

HTML-код

JavaScript-код

PHP-код

© 2006–2024 Dimox.name. Все права защищены. Перепечатка запрещена.