• Контакты
  • +7 (937) 486-30-30
  • mail@allbx.ru

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


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

В роли кнопки могут выступать практические любые элементы(теги), я рассмотрю пример на теге <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>

Пример

Алексей Бульчук
Специалист-консультант
Хотите получить консультацию?
Оставьте заявку и мы свяжемся с Вами в ближайшее время.

Похожые статьи

Разработчикам

Модернизация модального окна от facebox

В данной статье хочу привести пример использования facebox, для организации вывода произво...

Разработчикам

Установка WordPress на локальный сервер Denwer

Скачиваем дистрибутив CMS WordPress Распаковка архива Создание БД Установка Все

Разработчикам

Увеличение быстродействия Bitrix.

Разработчикам

Настройка cron в ISPmanager

Разработчикам

Добавляем в поиск по заголовкам (поиск с подсказками) поиск по свойствам

10.03.2019
Разработчикам

Программный пересчет заказа в 1С-Битрикс

16.10.2019
Разработчикам

Устанавливаем на BitrixVM 5.1 FTP сервер vsftpd

Разработчикам

Redirect 301 – переадресация через htaccess. Убираем www и меняем домен и url страниц.

Разработчикам

Написание статей

Написание текста для продвигаемой страницы очень важно. При этом во главу угла ставится ун...

Разработчикам

Создаем Robots.txt

Разработчикам

Сеть для рекламодателей: новое в технологиях таргетирования и продуктах

Разработчикам

Установка часового пояса в PHP.

date_default_timezone_set("Europe/Moscow");