Button in CSS Wrong in form input, but correct in other CSS call types

Question

Button in CSS Wrong in form input, but correct in other CSS call types

Navigation

#1 by (1 votes)

0

I have a form with the following code:

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 is misaligned:

My CSS of the btn class 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 get the text aligned correctly?

html5 css3 bootstrap-4

asked by anonymous 14.06.2018 / 22:23

1 answer

Oracle - DBMS_APPLICATION_INFO.set_client_info - What is it and when to use Regular expression capturing whole line

score 1 · Accepted Answer

Withdraw height from .btn and adjust height with padding , type:

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