Объемная 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>

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

  • Иван: к записи Привет всем, доброго времени суток! Я излазил весь »
  • Александер: к записи Потом пригляделся, вроде Вы не это имели в виду и »
  • Александер: к записи У Вас не русифицируется, потому что не везде включ »
  • Администратор: к записи Это надо использовать функции вашей CMS. »
  • Alex: к записи Ребят, а подскажите пожалуйста, как реализовать с »
  • Владимир: к записи А как теперь будет выглядеть ссылка для перехода н »
  • Администратор: к записи Не знаю. »

Статистика спама

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