Oi, tudo bom? estou desenvolvendo um programa que calcula Δs (fórmula de física) eu estou com dúvida em relação ao posicionamento do botão no programa, como eu posso deixa-lo a direita do site, sem o título encostar nele?
CSS do botão:
button {
padding: .5em 2em;
border: 0;
border-bottom: 3px solid;
font-size: 1.2em;
cursor: pointer;
margin: 3px;
margin-top: 3px;
color: #fff;
background-color:#0c8cd3;
border-color: #04324c;
width: 20%;
display: block;
margin: 10px 0px;
float: right;
clear: both;
}
.titulo{
background: #00a8fdd1;
font-family: Georgia;
font-size: 40px;
color: white;
margin: 16px;
border: auto;
padding: 10px;
}
.incognita{
background: #00a8fd73;
font-family: Georgia;
font-size: 40px;
color: white;
margin: 16px;
border: auto;
padding: 10px;
}
HTML:
<!DOCTYPE html>
<html>
<header>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="exemplocss.css">
</header>
<h4 class="incognita"> Variação de distância ΔS = Sf -Si </h4>
<form id="Dados-deltaS">
<div class="grupo">
<label for="distancia-inicial">Espaço Inicial:</label>
<input id="distancia-inicial" name="distancia-inicial" type="text" placeholder="Digite o valor de Si em metros" class="campo">
</div>
<div class="grupo">
<label for="distancia-final">Espaço Final</label>
<input id="distancia-final" name="distancia-final" type="text" placeholder="Digite o valor de Sf em metros" class="campo">
</div>
<button class="botão" id="calcule-deltaS" > Calcule! </button>
</form>
<h4 class="incognita"> Variação de tempo: Δt = tf - ti </h4>
</html>
Eu mandei apenas parte do arq. se precisar eu mando completo.