Подскажите как лучше оформить input + внутри button

Question

<div class="input-email">
   <label for="email"></label>
   <input type="email" name="" id="email">
   <button class="btn">Get started</button>
</div>

Как лучше прописать стили для button? Сделать ему абсолютное позиционирование внутри div class="input-email" и прижать к правому краю контейнера?

А синий border лучше прописать непосредственно input или div class="input-email"?

Буду благодарна за ваши идеи :)

Answer 1

.input-email {
  display: flex;
  flex-direction: row;
  width: 100%;
  font-weight: bold;
  font-size: 14px;
}

.input-email input,
.input-email button {
  display: block;
  font: inherit;
  box-sizing: border-box;
}

.input-email input {
  width: 100%;
  padding: 8px 20px 8px 10%;
  border-radius: 50px 0 0 50px;
  border: 1px solid #3c84ff;
  border-right: 0;
  color: #3c84ff;
}

.input-email input::placeholder {
  opacity: 1;
}

.input-email button {
  padding: 8px 10%;
  margin-left: -20px;
  border-radius: 50px;
  border: 0;
  background: #ff8500;
  color: #fff;
  white-space: nowrap;
  box-shadow: 0 0 5px 1px rgba(0,0,0,.15);
}

<div class="input-email">
   <input type="email" name="" id="email" placeholder="Geben Sie Ihre E-Mail-Adresse">
   <button class="btn">Get started</button>
</div>

БЛОГ НА HUSL

Подскажите как лучше оформить input + внутри button

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