Как прикрепить запись по электронной почте к кнопке при использовании начальной загрузки

Question

Я пытаюсь создать кнопку подписки, которая позволяет клиентам вводить свои электронные письма, как показано на изображении https://imgur.com/a/PIB87ng

      <div class="signup text-center">
          <h4>JOIN OUR MAILING LIST!</h4>
              <input type="email" id="myEmail" value="enter your email">
              <button onclick="myFunction()" class="btn btn-light-orange btn-sign">SUBSCRIBE</button> 




         .btn.btn-sign{
          padding: 1px 15px;

          border-radius: 0;
          font-family: 'Open Sans', sans-serif;
          font-size: 20px;
          font-weight: 600;

Answer 1

Если вы используете Bootstrap 4.X , если вы создаете <div class="input-group">, который окружает ваши input и button, то это создает желаемый результат.

HTML:

<div class="signup text-center">
     <h4>JOIN OUR MAILING LIST!</h4>
     <div class="input-group justify-content-center">
         <input type="email" id="myEmail" value="enter your email">
         <button onclick="myFunction()" class="btn btn-light-orange btn-sign">SUBSCRIBE</button>
     </div>
</div>

CSS: Здесь ничего не изменилось

.btn.btn-sign{
    padding: 1px 15px;

    border-radius: 0;
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
    font-weight: 600;
}

Ссылка к примеру Bootstrap для добавления кнопок для input-group

Здесь - это пример JSFiddle, если он вам нужен