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

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

Замечательная технология 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 лишены лишь возможности наблюдать все прелести современных веб-технологий.

Комментарии (56)
  1. 1
    Александр

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

  2. 3
    Андрей

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

  3. 5

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

  4. 6
    Виталий

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

  5. 7
    Роман

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

  6. 8
    Сергей

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

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

    • 9

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

      • 10
        Сергей

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

  7. 12
    Сергей

    Добрый день, 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 анимации, ведь кнопка и текст между собой не имеют жесткой связи?), а все остальные эффекты оставить без изменений?

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