Онлайн всего: 1
Гостей: 1
Пользователей: 0


ДЕМО Скачать исходники



Красивые кнопки как на YouTube. Без картинок чистый CSS. Думаю для любителей это очень понравится.

Сейчас я вам напишу как устанавливать:

1. Вначале вставляем этот код в свой CSS:
Code
.button {
  border: 1px solid #DDD;
  border-radius: 3px;
  text-shadow: 0 1px 1px white;
  -webkit-box-shadow: 0 1px 1px #fff;
  -moz-box-shadow: 0 1px 1px #fff;
  box-shadow: 0 1px 1px #fff;
  font: bold 11px Sans-Serif;
  padding: 6px 10px;
  white-space: nowrap;
  vertical-align: middle;
  color: #666;
  background: transparent;
  cursor: pointer;
}
.button:hover, .button:focus {
  border-color: #999;
  background: -webkit-linear-gradient(top, white, #E0E0E0);
  background: -moz-linear-gradient(top, white, #E0E0E0);
  background: -ms-linear-gradient(top, white, #E0E0E0);
  background: -o-linear-gradient(top, white, #E0E0E0);
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
}
.button:active {
  border: 1px solid #AAA;
  border-bottom-color: #CCC;
  border-top-color: #999;
  -webkit-box-shadow: inset 0 1px 2px #aaa;
  -moz-box-shadow: inset 0 1px 2px #aaa;
  box-shadow: inset 0 1px 2px #aaa;
  background: -webkit-linear-gradient(top, #E6E6E6, gainsboro);
  background: -moz-linear-gradient(top, #E6E6E6, gainsboro);
  background: -ms-linear-gradient(top, #E6E6E6, gainsboro);
  background: -o-linear-gradient(top, #E6E6E6, gainsboro);
}


2. Этот код вставляете там где будет эта кнопка:
Code
<button class="button" role="button">
  Кнопка #1
</button>


На этом установка закончена. Желаю всем удачи!





| Комментарий № 1 | Дата: 25.09.2013Спам

All of these articles have saved me a lot of hedhacaes.

Создать бесплатный сайт с uCoz