Оформление кнопок CSS

Оформление кнопок CSS

Оформление кнопок CSS Тематические порталы Портал CSS • Портал Веб-разработчиков

В данной статье рассмотрим вопрос об оформлении кнопок в CSS. Ранее мы рассматривали уже, как задавать размер, цвет фона, размер линий и так далее. Все эти настройки можно применять к различным кнопкам.

Все вопросы, комментарии по материалу данной статьи можно оставить на странице обсуждения.

Типы кнопок

В HTML мы можем организовать два типа кнопок:

• Стандартная кнопка, которая используется в основном для отправки различных форм или её могут называть функциональная кнопка:

<button>Нажми меня</button>

• Кнопка в виде блока, которая чаще всего используется в качестве ссылок по сайту, элементом дизайна сайта:

<a href="#" class="my_button">Нажми меня</a>

Оформление кнопок CSS

Ко всем кнопкам можно применить CSS настройки для их оформления. Здесь всё зависит от творческого подхода и оформить кнопки под дизайн сайта, задать им размер, цвет, свойство изменения при наведении курсора или нажатии.

Оформление кнопок

(Рис. 1) Кнопка, оформленная в CSS.

Отметим, что если хотите применить CSS свойства ко всем кнопкам сразу, то мы необходимо в названии элемента указать button и задать ему свойства, например зададим ему размер, цвет фона и изменим шрифт, а если хотите настроить определённую кнопку, то в настройках нужно обозначить её название, в нашем случае .my_button: и задать следующие CSS параметры:

button {
  background: #ededed;
  border: 1px solid #ccc;
  padding: 10px 30px;
  margin: 10px 10px 10px 0px;
  border-radius: 3px;
  cursor: pointer;
  width: 180px;
}

• background - настройка фона
• border - настройка границ
• padding - настройка внутренних отступов
• margin - настройка внешних отступов
• border-radius - сглаживаем угры кнопки
• cursor - устанавливаем вид курсора
• width - задаём размер кнопки

Дополнительные настройки

Эффект при нажатии на кнопку

После применения выше обозначенных настроек все кнопки на сайте будут соответствовать этой настройке. Внешний вид кнопки смотрите приведён выше справа (Рис. 1). Однако Вы может заметили, что в отличие от стандартной кнопки исчезли эффекты при нажатии или наведении. Это может исправить дополнив код CSS следующим образом:

button:active {
  background: #e5e5e5;
  -webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
     -moz-box-shadow: inset 0px 0px 5px #c1c1c1;
          box-shadow: inset 0px 0px 5px #c1c1c1;
   outline: none;
   color: black;
}

Рис. 2. Кнопка с эффектом нажатия в CSS.

Таким образом мы задаём настройки внутренней тени при нажатии на кнопку, что придаёт эффект нажатия.

Если хотите сделать абсолютный эффект нажатия (как будто кнопка проваливается), то задайте следующие настройке кнопке:

button {
    background-color: #ededed;
    padding: 10px;
    box-shadow: 2px 1px 2px gray;
    margin: 0px 0px 0px 0px;
    width: 180px;
}

button:active {
    box-shadow: 0 0 0 #ededed;
    margin: 2px 2px 2px 2px;
    color: black;
}

Такой эффект достигается за счёт настройки тени и внешних отступов (Рис 2.):

• box-shadow - задаём параметры тени и настройки активной кнопки убираем этот параметр.

Эффект при наведении на кнопку

Также есть возможность менять внешний вид кнопки при наведении на неё курсора. Сделать это можно применив следующую CSS настройку:

button:hover {
background: white;
border: 1px solid black;
color: black;
}

Примечание

Теперь мы можем настраивать кнопки на сайте в соответствии нашего видения, общего дизайна сайта. Исходный файл с описанным выше примером оформления кнопок можно скачать здесь.

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