Как сверстать такое поле инпут вместе с кнопкой?

Question

Как можно сделать вот такую форму? что не пробовал, постоянно распадается. Спасибо!

<form class="form_group" action="#">
                <input type="text" placeholder="Your email address">
                <button class="btn">Subscribe</button>
</form>

Answer 1

Можно установить абсолютное позиционирование для кнопки и иконки письма (или же прописать иконку в placeholder), в то время как для form установлены конкретные размеры и position: relative;

Либо же используйте отрицательные значения margin для позиционирования кнопки.

body, div, form, input, button {
  box-sizing: border-box;
}

body {
  background-color: #bcbcbc;
}

.form_group {
  position: relative;
  width: 400px;
  height: 100px;
  margin: 0 auto;
}

.form_group input {
   width: 100%;
   height: 50px;
   padding: 10px 40px;
   border: 2px solid #fff;
   border-radius: 30px;
   background-color: #fff;
}

.btn {
  position: absolute;
  right: 0;
  top: 0;
  width: 120px;
  height: 50px;
  border: none;
  border-radius: 30px;
  font-weight: 900;
  color: #fff;
  background-color: #f78434;
}

.form_group span {
  position: absolute;
  top: 15px;
  left: 15px;
}

<form class="form_group" action="#">
                <span>&#128231;</span>
                <input type="text" placeholder="Your email address">
                <button class="btn">Subscribe</button>
</form>

БЛОГ НА HUSL

Как сверстать такое поле инпут вместе с кнопкой?

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