Кнопка
Часть раздела Styling with CSS путешествия по HTML на Coddy — урок 53 из 76.
Задание
ЛегкоВ этом уроке мы стилизуем кнопку отправки, чтобы сделать ее визуально привлекательной. Вы примените цвет фона, настроите цвет текста и внутренние отступы, закруглите углы и добавите тень к форме, чтобы выделить ее.
Стилизуйте элемент <button>. Выполните следующие шаги:
- Установите width на 100%, чтобы она заполняла все пространство.
- Примените background-color по вашему выбору.
- Измените text color и сделайте шрифт заметным.
- Добавьте padding, чтобы улучшить интервалы.
- Закруглите углы.
- Примените свойство box-shadow к кнопке, чтобы она выделялась на фоне.
Попробуйте сами
<html>
<head>
<title>Login Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<form class="login-form">
<h2>Login</h2>
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
<button type="submit">Login</button>
</form>
</body>
</html>
Все уроки раздела Styling with CSS
4Основы работы с текстом
Цвет текстаСемейство шрифтовРазмер шрифтаНасыщенность шрифтаВыравнивание текстаОформление текстаПовторение: Задача №1Повторение: Задача №2
11Методы верстки
Блочные и строчные элементыОсновы позиционированияОтносительное позиционированиеАбсолютное позиционированиеФиксированное позиционированиеОсновы Z-IndexИтоговое испытание14Финальные испытания
Расположение элементовСписок фильмовСвадебное приглашениеВсплывающее уведомление