css – Align input field and button

Question

Good evening,

I tried to align the input field and the submit button of an email submission form (plugin: contact form 7).

<form action="https://test.librairiedamase.com/?na=s" method="post">
  <input type="hidden" name="nlang" value="">
  <input class="tnp-email" id="tnp-1" type="email" required="" name="ne" value="" placeholder="Email">
  <input class="tnp-submit" type="submit" value="S’abonner" >
</form>

Here is my CSS code :

  border-radius: 25px 0 0 25px;
  height: 38px;
  padding: 9px 10px;
  margin-right: -5px;
}

input#tnp-1.tnp-email:focus {
    outline: none;
}

input.tnp-submit {
  border-radius: 0 25px 25px 0;
  background: #1a4e3c;
  height: 38px;
  padding: 9px 10px;
  color:  white;
}

input.tnp-submit:hover {
  background: #4d806e;
}

input#tnp-1.tnp-email, button, input, optgroup, select, textarea {
    font-family: inherit;
    border: none;
}

Strangely, the input field and the button are not perfectly aligned.

Thank you in advance for your help.

0
Kambro 2 weeks 2023-01-21T12:08:36-05:00 0 Answers 0 views 0

Leave an answer

Browse
Browse