Кнопка
Часть раздела 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Финальные испытания
Расположение элементовСписок фильмовСвадебное приглашениеВсплывающее уведомлениеПотренируйтесь самостоятельно: Песочница Web