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

Question

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

De.Minov · Answer

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

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

One Answer

Add your own answers!

Ask a Question