css – Align input field and button


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

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.

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

Leave an answer