CSS button Misaligned form input, but correct for other types of CSS call

Question

I have a form with the code to follow:

div class="container">
<!-- Formulário de Login -->
<form action="validacao.php" target="_blank" method="post">
    <fieldset>
        <legend>Dados de Login</legend>
        <label for="txUsuario">E-Mail</label>
        <input type="text" class="form-control" required="required" name="usuario" id="txUsuario" required autocomplete="off" />
        <label for="txSenha">Senha</label>
        <input type="password" class="form-control" required="required" name="senha" id="txSenha" required autocomplete="off" />

        <input type="submit" class="btn btn-primary" value="Entrar na Área Administrativa" />
    </fieldset>
</form>


<br>
<br>
<p><b><a class="btn" href="../cadastros/cadastro_candidato.html">Criar uma Conta</a></b></p>
<br>
<br>

But the first button, the text gets misaligned:

My btn class CSS is:

.btn {
    padding: 0 30px;
    height: 33px;
    border: 1px solid #ddd;
    border-radius: 3px;
    background-color: steelblue;
    color: #fff;
    cursor: pointer;
}

.btn.verde {
    background-color: #07b690;
}

.btn:hover {
    box-shadow: 3px 3px 5px #ccc;
}

How can I make the first button align correctly?

Answer 1

Remove the height of .btn and adjust the height with padding, guy:

       top/bottom
          ↓
padding: 10px 30px;
               ↑
          right/left

Example:

.btn {
    padding: 10px 30px;
    border: 1px solid #ddd;
    border-radius: 3px;
    background-color: steelblue;
    color: #fff;
    cursor: pointer;
}

.btn.verde {
    background-color: #07b690;
}

.btn:hover {
    box-shadow: 3px 3px 5px #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<div class="container">
<!-- Formulário de Login -->
<form action="validacao.php" target="_blank" method="post">
    <fieldset>
        <legend>Dados de Login</legend>
        <label for="txUsuario">E-Mail</label>
        <input type="text" class="form-control" required="required" name="usuario" id="txUsuario" required autocomplete="off" />
        <label for="txSenha">Senha</label>
        <input type="password" class="form-control" required="required" name="senha" id="txSenha" required autocomplete="off" />

        <input type="submit" class="btn btn-primary" value="Entrar na Área Administrativa" />
    </fieldset>
</form>


<br>
<br>
<p><b><a class="btn" href="../cadastros/cadastro_candidato.html">Criar uma Conta</a></b></p>
<br>
<br>