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

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

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

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

Александр
11 лет назад

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

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

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

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

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

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

Сергей

8 лет назад

Добрый день, Dimox.
Я наверно не совсем корректно выразился. На сайте vsr-kemerovo.cerkov.ru/, были размещены мной несколько кнопок. Так как кнопки желтого цвета не было, они были сделаны по аналогии, ориентируясь на сайт 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

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

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

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

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

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

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

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