Кнопка CSS
В этом разделе, мы вводим использование CSS для создания кнопки.
Основные кнопки Стиль
По
Примеры CSS
цвет фона: # 4CAF50; / * Зеленый * /
границы: нет;
цвет: белый;
обивка: 15px 32px;
выравнивания текста: центр;
текст-отделка: нет;
Дисплей: встроенный блок;
размер шрифта: 16px;
}
Попробуйте »
цвет кнопки
Мы можем использовать background-color свойство установить цвет кнопки:
Примеры CSS
.button2 {фонового цвета: # 008CBA;} / * Синий * /
.button3 {фонового цвета: # f44336;} / * Красный * /
.button4 {фонового цвета: # e7e7e7; цвет: черный;} / * Серый * /
.button5 {фонового цвета: # 555555;} / * черный * /
Попробуйте »
Размер кнопки
Мы можем использовать font-size свойство , чтобы установить размер кнопки:
Примеры CSS
.button2 {размер шрифта: 12px;}
.button3 {размер шрифта: 16px;}
.button4 {размер шрифта: 20px;}
.button5 {размер шрифта: 24px;}
Попробуйте »
кнопка Округлые
Мы можем использовать border-radius свойство для установки кнопки филе:
Примеры CSS
.button2 {границы радиус: 4px;}
.button3 {границы радиус: 8px;}
.button4 {границы радиус: 12px;}
.button5 {границы радиус: 50%;}
Попробуйте »
Кнопка цвет границы
Мы можем использовать border свойство кнопки цвет границы:
Примеры CSS
фон-цвет: белый;
цвет: черный;
границы: 2px твердый # 4CAF50; / * Зеленый * /
}
...
Попробуйте »
Кнопка Hover
Мы можем использовать :hover селектор , чтобы изменить стиль при наведении на кнопку.
Совет: Мы можем использовать transition-duration свойства установлено значение "парить" скорость эффекта:
Примеры CSS
-webkit переходных продолжительность: 0.4s; / * Safari * /
переходных продолжительность: 0.4s;
}
.button: Hover {
цвет фона: # 4CAF50; / * Зеленый * /
цвет: белый;
}
...
Попробуйте »
тень кнопки
того, как Мы можем использовать box-shadow свойство , чтобы добавить тень к кнопке:
Примеры CSS
коробка-тень: 0 8px 16px 0 RGBA (0,0,0,0.2), 0 6px 20px 0 RGBA (0,0,0,0.19);
}
.button2: Hover {
коробка-тень: 0 12px 16px 0 RGBA (0,0,0,0.24), 0 17px 50px 0 RGBA (0,0,0,0.19);
}
Попробуйте »
кнопка Отключить
Мы можем использовать opacity свойство , чтобы добавить прозрачности (похож на "отключено" эффекты атрибутов) для кнопки.
Совет: Что я могу добавить cursor свойство и установить его в "не-разрешенных" создать образ инвалида:
Кнопка Ширина
По умолчанию размер текста кнопочную решил (на основе текста длины, совпадающим). Мы можем использовать width свойство для установки ширины кнопки:
Совет: Если вы хотите установить фиксированную ширину можно использовать пиксели (ПВ) в качестве единицы, если вы хотите установить адаптивные кнопки могут быть установлены в процентах.
Группа кнопок
Удалить из внешнего и добавить float:left набор кнопок:
С помощью пограничного Button Group
Мы можем использовать border свойство для установки группы кнопок с границей: