Как сделать форму для записи css html

HTML код:

<form action="#" method="POST">
  <label for="name">Имя:</label>
  <input type="text" id="name" name="name" required>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  <label for="phone">Телефон:</label>
  <input type="tel" id="phone" name="phone" required>
  <label for="message">Сообщение:</label>
  <textarea id="message" name="message" required></textarea>
  <button type="submit">Отправить</button>
</form>

CSS стили:

form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 50px;
}

label, input, textarea {
  display: block;
  margin-bottom: 10px;
}

input, textarea {
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

button {
  padding: 10px 20px;
  background-color: #333;
  color: #fff;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

button:hover {
  background-color: #666;
}

В данном примере форма сделана на флексах для центрирования на странице и организации ее элементов в колонку. Стилизация элементов формулируется последовательно, используя свойства блочности и вставки элементов и добавления свойств ввода, такие как граница размера и поле заполнения.

Кнопка имеет черный фон и белый текст, а при наведении меняется фон.