0
<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"?

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

введите сюда описание изображения

1 ответ 1

0

.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>

2
  • 1
    Cупер, спасибо огромное за такое классное решение! 23 июл 2020 в 7:56
  • @OksanaKirichuk, Пожалуйста
    – De.Minov
    23 июл 2020 в 8:01

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.