Кнопка
Часть раздела Стилизация с 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>
Все уроки раздела Стилизация с CSS
4Основы работы с текстом
Цвет текстаСемейство шрифтаРазмер шрифтаНасыщенность шрифтаВыравнивание текстаОформление текстаПовторение: задание №1Повторение: задание №27Блочная модель. Часть 1
Что такое блочная модель?Внутренние отступыВнешние отступыГраницыШирина и высотаИтоговое задание
Потренируйтесь самостоятельно: Песочница Web