Создание и оформление кнопки при помощи CSS.

В роли кнопки могут выступать практические любые элементы(теги), я рассмотрю пример на теге <span> с классом button.

Оформление

В качестве фона сделаем градиент, если браузер не поддерживает градиенты, то фон будет заливатся одним цветом. Форма будет с закругленными краями и тенью.

Код CSS:

span.button {
/* заливка */
  background-color: #EAEAEA;
  background-image: -webkit-gradient(linear, left top, left bottom, from(white), to(#EAEAEA));/*Chrome,Safari*/
  background-image: -webkit-linear-gradient(top, white, #EAEAEA);/*Chrome,Safari*/
  background-image: -moz-linear-gradient(top, white, #EAEAEA);/*firefox*/
  background-image: -ms-linear-gradient(top, white, #EAEAEA);/*IE*/
  background-image: -o-linear-gradient(top, white, #EAEAEA);/*Opera*/
  background-image: linear-gradient(top, white, #EAEAEA); /*CSS 3*/
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#eaeaea); /* для IE */
/* радиус границы */
  -moz-border-radius: 2px;/*firefox*/
  -webkit-border-radius: 2px;/*Chrome,Safari*/
  border-radius: 2px;/*CSS 3*/
  border: 1px solid #CCC;
  border-bottom-color: #AAA;
/* тень */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.25);
/* прочее оформление */
  color: #555;
  vertical-align: middle;
  cursor: pointer;
  display: block;
  padding: 2px 5px;
  margin: 2px 0px 2px 7px;
  width: 130px;
}
/* Стиль кнопки при наведении */
span.button:hover{
  background-color: white;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#EAEAEA), to(white));
  background-image: -webkit-linear-gradient(top, #EAEAEA, white);
  background-image: -moz-linear-gradient(top, #EAEAEA, white);
  background-image: -ms-linear-gradient(top, #EAEAEA, white);
  background-image: -o-linear-gradient(top, #EAEAEA, white);
  background-image: linear-gradient(top, #EAEAEA, white);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#EAEAEA, endColorstr=#ffffff);
}

На основании данного кода можете создать свою кнопку.

Код HTML

<span class="button">Нравится</span>

Пример



comments powered by Disqus

Популярное