CSS Кнопки
Дізнайтесь, як стилізувати кнопки на вебсторінці за допомогою CSS.
Основні стилі кнопок
Приклад
.button {
background-color: #4CAF50; /* зеленый */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
Спробуйте самі »
Кольори кнопок
Використовуйте властивість background-color щоб змінити колір фону кнопки:
Приклад
.button1 {background-color: #4CAF50;} /* Зелений */
.button2 {background-color: #008CBA;} /* Синий */
.button3 {background-color: #f44336;} /* Червоний */
.button4 {background-color: #e7e7e7; color: black;} /* Сірий */
.button5 {background-color: #555;} /* Чорний */
Спробуйте самі »
Розмір кнопок
Використовуйте властивість font-size щоб змінити розмір шрифту кнопки:
Приклад
.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}
Спробуйте самі »
Використовуйте властивість padding щоб змінити відступ кнопки:
Приклад
.button1 {padding: 10px 24px;}
.button2 {padding: 12px 28px;}
.button3 {padding: 14px 40px;}
.button4 {padding: 32px 16px;}
.button5 {padding: 16px;}
Спробуйте самі »
Округлі кнопки
Використовуйте властивість border-radius щоб додати закруглені кути кнопці:
Приклад
.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}
Спробуйте самі »
Кольорові межі кнопки
Використовуйте властивість border щоб додати кольорову межу для кнопки:
Приклад
.button1 {
background-color: white;
color: black;
border: 2px solid #4CAF50; /* Green */
}
...
Спробуйте самі »
Кнопки при наведенні миші
Використовуйте селектор :hover щоб змінити стиль кнопки при наведенні на неї миші.
Порада: Використовуйте властивість transition-duration щоб визначити швидкість ефекту "hover" (зависання):
Приклад
.button {
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}
.button:hover {
background-color: #4CAF50; /* Green */
color: white;
}
...
Спробуйте самі »
Тінь кнопок
Використовуйте властивість box-shadow для додавання тіней до кнопки:
Приклад
.button1 {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.button2:hover {
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
Спробуйте самі »
Відключені кнопки
Використовуйте властивість opacity для додавання прозорості кнопці (створює "відключений" вигляд).
Порада: Ви також можете додати властивість cursorзі значенням "not-allowed" (не дозволено), яке буде відображати значок "немає парковки" при наведенні курсора на кнопку:
Ширина кнопок
За замовчуванням розмір кнопки визначається її текстовим змістом (таким самим по ширині, як її зміст). Використовуйте властивість width, щоб змінити ширину кнопки:
Порада: Використовуйте пікселі, якщо ви хочете встановити фіксовану ширину, та використовуйте процент для адаптивних кнопок (наприклад, 50% її батьківського елемента).
Групи кнопок
Видаліть поля і додайте float:left до кожної кнопки, щоб створити групу кнопок:
Група кнопок з межами
Використовуйте властивість border для створення групи кнопок з межами:
Вертикальна група кнопок
Використовуйте display:block замість float:left для групування кнопок одна над одною, а не поруч одна біля одної:
Кнопка на зображенні
