Объемная HTML кнопка

Данный материал содержит достаточно объемный кусок CSS, который описывает пример создания объемной кнопки на HTML, реагирующей на нажатие мышкой эффектом вдавливания. Иными словами button при клике выделится цветом и чуть продавится «внутрь» веб-страницы.

Объемная HTML кнопка

Итак, вот собственно сами стили:

.pnch {
  background:#222;
  border:1px solid #555;
  border-color:#555 #000 #000 #000;
  -moz-border-radius:4px;
  -webkit-border-radius:4px;
  border-radius:5px;
  transition:margin 0.1s;
  -webkit-box-shadow:inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111;
  box-shadow:inset 0 1px 10px 1px #222, 0px 1px 0 rgb(63, 63, 63), 0 6px 0px rgb(63, 63, 63), 0 8px 4px 1px rgb(158, 158, 158);
  color:#fff;
  font:bold 16px/20px "helvetica neue", helvetica, arial, sans-serif;
  margin:0 0 10px;
  position:relative;
  padding:10px 20px;
  text-align:left;
  text-shadow:0px -1px 1px rgb(0, 0, 0);
  -webkit-background-clip:padding-box;
  background-clip:padding-box;
  display:block;
}
.pnch:hover {
  -webkit-box-shadow:inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111;
  box-shadow:inset 0 0px 20px 1px rgb(114, 114, 114), 0px 1px 0 rgb(95, 95, 95), 0 6px 0px rgb(66, 66, 66), 0 8px 4px 1px rgb(196, 196, 196);
  cursor:pointer;
}
.pnch:active {
  -webkit-box-shadow:inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111;
  box-shadow:inset 0 1px 10px 1px rgb(0, 0, 0), 0 1px 0 rgb(83, 83, 83), 0 2px 0 rgb(0, 0, 0), 0 4px 3px 0 rgb(158, 158, 158);
  top:4px;
}
.pnch:before {
  content:'';
  position:absolute;
  top:-5px;
  background:transparent;
  height:50px;
  width:100%;
  display:block;
  left:0;
  z-index:100000;
}

HTML разметка при этом будет выглядеть следующим образом:

<button class="pnch">Отправить</button>
Скачать HTML кнопку на сайт
Опубликовано 25-06-2013 в 15:18


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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>











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

  • krasnov8953: к записи Не работает как мне кажется строчка $newTvId = $ »
  • Dimanski: к записи ничего не понимаю. Ставлю ModX на хостинг r01.ru »
  • Дмитрий: к записи Спасибо! Очень выручили. С битриксом беда, а прав »
  • леонид: к записи как сделать что были в ряд? у меня получается по о »
  • Администратор: к записи Статический IP. »
  • Steel: к записи Администратор, вы данную проблему решили подключен »
  • Дмитрий: к записи Хотел узнать как прикрутить данное окно (http://re »

Последние твиты