ФОРУМ PS-Studio.Info

  • Страница 1 из 1
  • 1
Форум » Общий форум: Веб-дизайн » Готовые решения » 1000 мелочей » Простейшие кнопки на CSS (Базовое оформление кнопок с помощью CSS)
Простейшие кнопки на CSS
Дата: Сб, 28.04.2018, 23:15 Сообщение # 1
ps-studio
Администраторы
Как задаётся обычная кнопка? Следующим кодом:

Код
<button>Текст кнопки</button>


Простейшие стили для оформления кнопки, чтобы она отличалась от стандартной кнопки браузера:

Код
<button class="mainbutton">Текст кнопки</button>


Код

.mainbutton {
background-color: #253138; /* Цвет самой кнопки */
border: none; /* Обнуляем бордеры */
color: #ffcc33; /* Цвет текста кнопки */
padding: 10px 20px; /* Отступы внутри кнопки от текста до её границ */
text-align: center; /* Делаем текст кнопки в центре */
text-decoration: none; /* Убираем подчёркивание для текста */
display: inline-block; /* Делаем кнопку блочно-строчным элементом */
font-size: 14px; /* Размер текста кнопки */
cursor: pointer; /* Задаём появление курсора при наведении мыши на кнопку */
border-radius: 4px; /* Закругляем углы кнопки */
}


профиль www Вверх
Дата: Сб, 28.04.2018, 23:38 Сообщение # 2
ps-studio
Администраторы
Как заставить кнопку менять оформление при наведении на неё курсора мыши? Для изменения состояния прописывают стили для кнопки c помощью псевдокласса :hover.

То есть, к примеру, у нас кнопка, назначим ей какой-то класс и дадим ему название, любое, например, mainbutton

Код
<button class="mainbutton">Это текст кнопки</button>


Например, оформление кнопки такое:

Код

.mainbutton {
background-color: white; /* Цвет самой кнопки */
color: green; /* Цвет текста кнопки */
border: 2px solid #4CAF50; /* Задаём цвет и толщину бордеров */
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
cursor: pointer;
border-radius: 4px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s; /* Время анимации перехода цвета кнопки к другому цвету при наведении мыши на неё */
}


А при наведении мы изменим её оформление с помощью псевдокласса :hover:

Код

.mainbutton:hover {
background-color: #4CAF50; /* Цвет кнопки изменился */
color: white; /* Цвет текста кнопки изменился */
}


профиль www Вверх
Дата: Вс, 29.04.2018, 00:02 Сообщение # 3
ps-studio
Администраторы
Как сделать тень для кнопки?С помощью CSS-свойства box-shadow

Пример:

Код
<button class="shadow">Кнопка с тенью</button>


Код

.shadow {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); /* Тень уже есть изначально */
}


Его можно добавить и для кнопки в состоянии при наведении на неё курсора мыши.

Пример:

Код
<button class="main">Это кнопка</button>


Код
.main {
background-color: #4CAF50;
color: white;
}

.main:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); /* Добавилась тень при наведении мыши на кнопку */
}


профиль www Вверх
Дата: Вс, 29.04.2018, 00:21 Сообщение # 4
ps-studio
Администраторы
Чтобы кнопку сделать неактивной, нужно снизить её прозрачность, чтобы визуально дать понять, что с ней что-то не так, плюс изменить визуально курсор при наведении мыши на кнопку

Код
<button class="disabled">Кнопка неактивна</button>


Код
.disabled {
background-color: #253138;
border: none;
color: #ffcc33;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
cursor: pointer;
border-radius: 4px;
opacity: 0.6; /* Меняем прозрачность кнопки */
cursor: not-allowed; /* Меняем визуально курсор при наведении на неё мыши */
}


профиль www Вверх
Форум » Общий форум: Веб-дизайн » Готовые решения » 1000 мелочей » Простейшие кнопки на CSS (Базовое оформление кнопок с помощью CSS)
  • Страница 1 из 1
  • 1
Поиск:

Хостинг от uCoz