CSS - Кнопки: Полное руководство для начинающих
Здравствуйте, будущие веб-разработчики! Сегодня мы окунемся в奇妙ный мир CSS-кнопок. К концу этого руководства вы будете создавать кнопки, которые не только хорошо работают, но и выглядят потрясающе. Так что давайте начнем!
CSS Кнопки - Основной пример
Давайте начнем с простого примера кнопки. Вот HTML и CSS, которые вам needed:
<button class="basic-button">Нажми меня!</button>.basic-button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}Это создает зеленую кнопку с белым текстом. Свойство padding добавляет ей размер, а cursor: pointer изменяет курсор мыши на руку при наведении на кнопку.
CSS Кнопки цветов
Кнопки могут быть любого цвета, который ты хочешь! Вот как создать кнопки разных цветов:
<button class="blue-button">Синяя</button>
<button class="red-button">Красная</button>
<button class="yellow-button">Желтая</button>.blue-button {background-color: #008CBA;}
.red-button {background-color: #f44336;}
.yellow-button {
background-color: #ffeb3b;
color: black;
}Обратите внимание, как мы использовали черный текст для желтой кнопки, чтобы обеспечить читаемость.
CSS Кнопки размеров
Вы можете легко создать кнопки разных размеров, изменив font-size и padding:
<button class="small-button">Маленькая</button>
<button class="medium-button">Средняя</button>
<button class="large-button">Большая</button>.small-button {
font-size: 12px;
padding: 10px 24px;
}
.medium-button {
font-size: 16px;
padding: 12px 28px;
}
.large-button {
font-size: 20px;
padding: 14px 40px;
}CSS Кнопки отступов
Отступы (padding) имеют решающее значение для размера кнопок. Давайте поэкспериментируем с разными значениями отступов:
<button class="padding-button1">Кнопка 1</button>
<button class="padding-button2">Кнопка 2</button>.padding-button1 {
padding: 10px 20px;
}
.padding-button2 {
padding: 15px 40px;
}помните, что первое значение - для отступов сверху и снизу, второе - для отступов слева и справа.
CSS Закругленные кнопки
Хочешь смягчить острые углы? Используй border-radius:
<button class="rounded-button">Закругленная</button>.rounded-button {
border-radius: 12px;
}Поэкспериментируй с разными значениями, чтобы получить желаемую roundness!
CSS Кнопки с有色 рамками
Давайте добавим рамки к нашим кнопкам:
<button class="border-button">Рамочная</button>.border-button {
background-color: white;
color: black;
border: 2px solid #4CAF50;
}Это создает белую кнопку с зеленым контуром и черным текстом.
CSS Кнопки с эффектом наведения
Интерактивность - ключ! Давайте сделаем наши кнопки изменяющимися при наведении:
<button class="hover-button">Наведи на меня</button>.hover-button {
background-color: white;
color: black;
border: 2px solid #008CBA;
transition: 0.3s;
}
.hover-button:hover {
background-color: #008CBA;
color: white;
}Свойство transition обеспечивает плавное изменение цвета.
CSS Кнопки с тенью
Добавь глубину своим кнопкам с помощью теней:
<button class="shadow-button">Тень</button>.shadow-button {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}Свойство box-shadow добавляет эффект тени к кнопке.
CSS Выключенные кнопки
Иногда нужно выключить кнопки:
<button class="disabled-button" disabled>Выключена</button>.disabled-button {
opacity: 0.6;
cursor: not-allowed;
}Свойство opacity делает кнопку более бледной, а cursor: not-allowed изменяет курсор, чтобы показать, что кнопку нельзя нажать.
CSS Ширина кнопок
Ты можешь контролировать ширину кнопок, используя проценты или фиксированные значения:
<button class="full-width">Полная ширина</button>
<button class="half-width">Половина ширины</button>.full-width {
width: 100%;
}
.half-width {
width: 50%;
}CSS Группы кнопок
Сгруппируй свои кнопки для единого внешнего вида:
<div class="button-group">
<button>Левая</button>
<button>Центральная</button>
<button>Правая</button>
</div>.button-group button {
float: left;
}
.button-group button:not(:last-child) {
border-right: none;
}Это создает горизонтально сгруппированный набор кнопок.
CSS Группы кнопок с рамками
Добавь рамки к своим группам кнопок:
<div class="border-button-group">
<button>Apple</button>
<button>Samsung</button>
<button>Sony</button>
</div>.border-button-group button {
border: 1px solid green;
float: left;
}
.border-button-group button:not(:last-child) {
border-right: none;
}CSS Вертикальные группы кнопок
Ты также можешь создать вертикальные группы кнопок:
<div class="vertical-button-group">
<button>Верх</button>
<button>Центр</button>
<button>Низ</button>
</div>.vertical-button-group button {
display: block;
width: 100%;
}
.vertical-button-group button:not(:last-child) {
border-bottom: none;
}CSS Кнопки на изображении
Положи кнопки на изображения для eye-catching эффекта:
<div class="container">
<img src="image.jpg" alt="Изображение">
<button class="btn">Кнопка</button>
</div>.container {
position: relative;
width: 100%;
}
.container img {
width: 100%;
height: auto;
}
.container .btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}CSS Анимированные кнопки
Давайте добавим анимацию к нашим кнопкам:
<button class="animated-button">Анимированная</button>@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.animated-button {
animation: pulse 2s infinite;
}Это создает эффект пульсации на кнопке.
CSS Эффект нажатия на кнопку
Симулируй нажатие на кнопку с помощью CSS:
<button class="press-button">Нажми меня</button>.press-button:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}Кнопка выглядит так, будто она опускается при нажатии.
CSS Эффект Fade In для кнопок
Создай эффект Fade In для своих кнопок:
<button class="fade-in-button">Fade In</button>@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.fade-in-button {
animation: fadeIn 2s;
}Эта кнопка будет Fade In при загрузке страницы.
CSS Эффект ряби на кнопках
Наконец, давайте создадим эффект ряби:
<button class="ripple">Рябь</button>.ripple {
position: relative;
overflow: hidden;
}
.ripple:after {
content: "";
background: #f1f1f1;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px !important;
margin-top: -120%;
opacity: 0;
transition: all 0.8s
}
.ripple:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s
}Это создает эффект ряби при нажатии на кнопку.
И вот и все! Теперь у тебя есть знания, чтобы создавать разнообразные CSS-кнопки. Помни, что практика делает perfect, так что не бойся экспериментировать с этими стилями и создавать свои уникальные кнопки. Удачи в кодировании!
Credits: Image by storyset