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

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

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

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

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

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

HTML

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

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

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

В Опере на input’е не работает свойство text-shadow;
В Опере у 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)

Александр
11 лет 6 месяцев назад

Подскажите пожалуйста, вроде все правильно сделал, а отображается коряво!
Изображение http://SSMaker.ru/3a0802d5/
- Dimox
  11 лет 6 месяцев назад / ответ на коммент Александр
  
  Значит что-то не то делаете.
Андрей
11 лет 1 месяц назад

Здравствуйте!
А есть ли возможность внедрить Ваши кнопки в XML-файл на флеш-сайт?
Спасибо.
- Dimox
  11 лет 1 месяц назад / ответ на коммент Андрей
  
  Не представляю, я во флеше не разбираюсь.
Максим
10 лет 6 месяцев назад

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

Спасибо! Очень круто! (=
Роман
10 лет 3 месяца назад

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

Добрый день.
Я Разместил пару таких кнопок на сайте, они должны быть разного цвета (первая -оранжевая, вторая-зеленая). Однако как только разместил код второй кнопки они обе сразу стали зеленого цвета, кроме того самопроизвольно изменилась кнопка “отправить комментарий” по сайту , она стала похожа на первую кнопку (цвет и размер).
Я новичок в CSS, однако судя по всему, в коде кнопки указаны общие правила для всех кнопок, что и привело к изменениям кнопок. Пробовал использовать параметр !important, однако без толку.
Хотелось бы сделать еще десятка полтора разноцветных подобных кнопок на сайте.
- Dimox
  8 лет 6 месяцев назад / ответ на коммент Сергей
  
  Используйте уникальные классы для разные кнопок, т.е. вместо .submit, например, .submit1 и .submit2 и т.д. И этим классам пропишите код соответствующих кнопок из примеров.
  - Сергей
    8 лет 6 месяцев назад / ответ на коммент Dimox
    
    Спасибо за оперативный ответ. Там действительно было в html: .submit1 и .submit2, а в CSS: .submit и .submit1.
    А каким образом можно изменить цвет и оттенки кнопки на другие, более насыщенные? как я понимаю в коде их три-самой кнопки, при подведении курсора и градиент по периметру.
    - Dimox
      8 лет 6 месяцев назад / ответ на коммент Сергей
      
      А каким образом можно изменить цвет и оттенки кнопки на другие, более насыщенные?
      Получить код нужного цвета с помощью какой-либо программы по подбору цвета.

Сергей

8 лет 5 месяцев назад

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

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

HTML

Примеры

Особенности

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

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

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

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

Создание универсальных графических кнопок с помощью CSS

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

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