Как сверстать данный блок с помощью css и html?

Question

Как сверстать данный блок? Можете подсказать каким способом можно написать его и сделать такие кнопки(нерабочие)просто макет. Конкретно интересует структура.

Answer 1

Для того чтобы сделать круглые кнопки нужно использовать border-radius

.btn {
  user-select : none;
  cursor : pointer;
  color: black;
  background : yellow;
  height : 3em;
  border-radius:1.5em;
  font-weight : bold;
  font-size : 20px;
  position : relative;
  
  
  display:flex;
  justify-content: center;
  align-items: center;
}

.btn-block {
  width : 15em; //по ситуации
}

<div class="btn-block">
  <div class="btn">
    Оставить заявку
  </div>
</div>

Вот так примерно их делают. Также иногда используют inline flex .

Answer 2

Используйте флексы:

body {
  padding: 2em;
  background-color: gold;
  display: flex;
  justify-content: center;
  align-items: center;
}

.form {
  width: 800px;
  background-color: #fff;
  padding-inline: 2em;
  border-radius: 0.2em;
  box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.2);
}

.form__primary-inputs {
  display: flex;
}

.form__input-item {
  display: flex;
  flex-direction: column;
  padding: 0.8em;
  border-bottom: 1px solid lightgrey;
  flex-grow: 1;
}

.form__input-item_type_from {
  padding-left: 0;
}

.form__input-item_type_where {
  border-inline: 1px solid lightgrey;
}

.form__input-item_type_time {
  padding-right: 0;
}

.form__input-label {
  font-family: sans-serif;
  font-weight: bold;
  margin-bottom: 0.5em;
}

.form__input-label::before {
  content: '';
  display: inline-block;
  width: 1.3em;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: orange;
  margin-right: 0.3em;
  vertical-align: -0.3em;
}

.form__primary-input {
  padding-bottom: 0.5em;
  border: none;
  border-bottom: 2px solid transparent;
}

.form__primary-input:focus {
  outline: none;
  border-bottom-color: orange;
}

.form__secondary-inputs {
  padding-block: 1em;
  display: flex;
  gap: 0.5em;
}

.form__secondary-input {
  flex-grow: 1;
  flex-shrink: 1;
  padding: 0.75em 0.5em;
  background-color: #ddd;
  border-radius: 1.25em;
  border: none;
}

.form__secondary-input:focus {
  outline: 2px solid orange;
}

.form__button {
  width: max-content;
  padding-inline: 2em;
  border-radius: 1.25em;
  background-color: orange;
  border: none;
  text-transform: uppercase;
  font-weight: bold;
  cursor: pointer;
}

<form class="form">
  <div class="form__primary-inputs">
    <label class="form__input-item form__input-item_type_from">
      <span class="form__input-label">Откуда</span>
      <input class="form__primary-input" type="text" placeholder="Укажите пункт отправления">
    </label>
     <label class="form__input-item form__input-item_type_where">
      <span class="form__input-label">Куда</span>
      <input class="form__primary-input" type="text" placeholder="Укажите пункт назначения">
    </label>
    <label class="form__input-item form__input-item_type_time">
      <span class="form__input-label">Время</span>
      <input class="form__primary-input" type="text" placeholder="Укажите время">
    </label>
  </div>
  <div class="form__secondary-inputs">
    <input class="form__secondary-input" type="text" placeholder="Ваше имя">
    <input class="form__secondary-input" type="text" placeholder="Ваш телефон">
    <input class="form__secondary-input" type="text" placeholder="Выберите услугу">
    <button class="form__button" type="submit">Оставить заявку</button>
  </div>
</form>

БЛОГ НА HUSL

Как сверстать данный блок с помощью css и html?

Ответы (2 шт):