Последние учебники веб-разработки
×

CSS Руководство

CSS ГЛАВНАЯ CSS Введение CSS Синтаксис CSS Как CSS Цвета CSS Фон CSS Границы CSS Маржа CSS набивка CSS Высота ширина CSS Текст CSS шрифты CSS связи CSS Списки CSS таблицы CSS Модель Бокса CSS Outline CSS Дисплей CSS Максимальная ширина CSS Позиция CSS терка CSS Inline-block CSS выравнивать CSS Комбинаторы CSS Псевдо-класс CSS Псевдо-элемент CSS Панель навигации CSS Dropdowns CSS Всплывающие CSS Галерея CSS изображение Непрозрачность CSS спрайтов CSS Attr селекторы CSS Формы CSS Счетчики

CSS3

CSS3 Введение CSS3 Закругленные углы CSS3 Пограничные изображения CSS3 Фон CSS3 Цвета CSS3 Градиенты CSS3 Тени CSS3 Текст CSS3 шрифты CSS3 2D Трансформации CSS3 3D Трансформации CSS3 Переходы CSS3 Анимации CSS3 Изображений CSS3 Кнопки CSS3 пагинация CSS3 Несколько столбцов CSS3 Пользовательский интерфейс CSS3 Box Определение размеров CSS3 Flexbox CSS3 Медиа-запросы CSS3 Примеры MQ

CSS Адаптивный веб-дизайн

Адаптивный веб-дизайн вступление Адаптивный веб-дизайн Viewport Адаптивный веб-дизайн Вид сетки Адаптивный веб-дизайн Медиа-запросы Адаптивный веб-дизайн Изображений Адаптивный веб-дизайн Видео Адаптивный веб-дизайн Каркасы

CSS Examples

CSS Примеры CSS викторина CSS сертификат

CSS References

CSS Справка CSS Селекторы CSS функции CSS Ссылка Aural CSS Web Safe шрифты CSS Animatable CSS Единицы CSS PX-EM конвертер CSS Цвета CSS Значения цвета CSS Цвет Названия CSS3 Поддержка браузеров

 

CSS Кнопки


Узнайте, как стиль кнопки с помощью CSS.


Основная кнопка Стайлинг

По

пример

.button {
    background-color: #4CAF50; /* Green */
    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;} /* Green */
.button2 {background-color: #008CBA;} /* Blue */
.button3 {background-color: #f44336;} /* Red */
.button4 {background-color: #e7e7e7; color: black;} /* Gray */
.button5 {background-color: #555555;} /* Black */
Попробуй сам "

Кнопка Размеры

Используйте font-size свойства , чтобы изменить размер кнопки:

пример

.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}
Попробуй сам "

Округлые Кнопки

Используйте 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 */
}
...
Попробуй сам "

Hoverable Кнопки


Используйте :hover селектор , чтобы изменить стиль кнопки при наведении мыши на него.

Совет: Используйте transition-duration свойство , чтобы определить скорость эффекта "зависания":

пример

.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 свойство со значением "не разрешенных", который будет отображать "не знак парковки" при наведении указателя мыши на кнопку:

пример

.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
Попробуй сам "

Кнопка Ширина


По умолчанию размер кнопки определяется его текстовым содержанием (так широко, как его содержание). Используйте width свойство изменять ширину кнопки:

пример

.button1 {width: 250px;}
.button2 {width: 50%;}
.button3 {width: 100%;}
Попробуй сам "

Группы кнопок


Удалить поля и добавьте float:left к каждой кнопке , чтобы создать группу кнопок:

пример

.button {
    float: left;
}
Попробуй сам "

Группы кнопка, выделенная рамкой


Используйте border собственности , чтобы создать группу кнопок граничила:

пример

.button {
    float: left;
    border: 1px solid green
}
Попробуй сам "

Анимированные кнопки

пример

Добавить стрелку на парении:

Попробуй сам "

пример

Добавьте эффект "ряби" на клик:

Попробуй сам "

пример

Добавить эффект "нажатия" на клик:

Попробуй сам "