-1

#botoes {
  width: 270px;
  margin-left: 20px;
}

#botao {
  float: right;
  padding: 5px;
  15px;
  font: bold 12px sans-serif;
  border-radius: 20px;
  box-shadow: 0px 1px 0px white;
  border: 1px solid #9eb9c3;
  background: #edf6f9;
  background: -webkit-linear-gradient(#edf6f9 0%, #cde5ee 100%);
  background: -moz-linear-gradient(#edf6f9 0%, #cde5ee 100%);
  background: -o-linear-gradient(#edf6f9 0%, #cde5ee 100%);
  background: linear-gradient(#edf6f9 0%, #cde5ee 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#edf6f9', endColorstr='#cde5ee', GradientType=0);
  color: #527988;
  box-shadow: 0px 0px 10pc #c9c9c9
}

#botao:hover {
  background: #cde5ee;
  background: -moz-linear-gradient(top, #cde5ee 0%, #edf6f9 100%);
  background: -webkit-linear-gradient(top, #cde5ee 0%, #edf6f9 100%);
  background: linear-gradient(to bottom, #cde5ee 0%, #edf6f9 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cde5ee', endColorstr='#edf6f9', GradientType=0);
  cursor: pointer;
}
<div id=botoes>

  <div id="botao">
    <input type="submit" name="enviar" value="Enviar">
  </div>

  <div id="botao">
    <input type="reset" name="limpar" value="Reset">
  </div>

  <div id="lembrar-senha">
    <input type="checkbox" />Lembrar senha
  </div>

2 Respostas 2

1

Basta na primeira linha do seus CSS vc colocar assim

[type="reset"] {
  all: unset;
}

Para o IE vc pode fazer dessa forma já que ele não aceita o unset (fonte)

[type="reset"] {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
}

O importante é que esses estilos venham logo no início do seu CSS, antes dos estilos personalizados que vc colocou.

Dessa forma vc reseta todos os valores default desse tipo de input, depois vc coloca os estilos que vc deseja. OBS: Repare que eu não limpei os estilos do btn type="submit" para vc ver a diferença entre um e outro.

Veja o Exemplo aplicado com o seu código.

/* reseta estilos desse input */
[type="reset"] {
  all: unset;
}
  
  #botoes{
width:270px;
margin-left:20px;

}
#botao{
float:right;
padding:5px 15px;
font: bold 12px sans-serif;
border-radius:20px;
box-shadow:0px 1px 0px white;
border:1px solid #9eb9c3;

background: #edf6f9;
background: -webkit-linear-gradient(#edf6f9 0%, #cde5ee 100%);
background: -moz-linear-gradient(#edf6f9 0%, #cde5ee 100%);
background: -o-linear-gradient(#edf6f9 0%, #cde5ee 100%);
background: linear-gradient(#edf6f9 0%, #cde5ee 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#edf6f9', endColorstr='#cde5ee',GradientType=0 );
color:#527988;
box-shadow:0px 0px 10pc #c9c9c9
}

#botao:hover{
background: #cde5ee;
background: -moz-linear-gradient(top, #cde5ee 0%, #edf6f9 100%);
background: -webkit-linear-gradient(top, #cde5ee 0%,#edf6f9 100%);
background: linear-gradient(to bottom, #cde5ee 0%,#edf6f9 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cde5ee', endColorstr='#edf6f9',GradientType=0 );
cursor:pointer;
}
<div id=botoes>
      
  <div id="botao">      
        <input type="submit" name="enviar" value="Enviar">
    </div>
  
  <div id="botao">
        <input type="reset" name="limpar" value="Reset">
  </div>

    <div id="lembrar-senha">
      <input type="checkbox"/>Lembrar senha
    </div>

</div> 

Existem outras formas de corrigir isso, mas essa eu acho a mais prítica, pois ele limpa os estilos do user-agent e vc pode começar "do zero" os estilos do seu elemento.

1

O ideal seria estilizar o próprio elemento ao invés de criar um wrapper para o reset, isso só tende a complicar mais como você está aplicando a estilização nos elementos. A princípio, se tratando somente da borda que mencionou na pergunta, basta remover a borda (do elemento filho) e herdar os valores das propriedades background e cursor do elemento pai:

input[type='reset']{
  border: none;
  background: inherit;
  cursor: inherit
}

Você pode ler mais sobre inherit nessa resposta.

#botoes {
  width: 270px;
  margin-left: 20px;
}

#botao {
  float: right;
  padding: 5px;
  15px;
  font: bold 12px sans-serif;
  border-radius: 20px;
  box-shadow: 0px 1px 0px white;
  border: 1px solid #9eb9c3;
  background: #edf6f9;
  background: -webkit-linear-gradient(#edf6f9 0%, #cde5ee 100%);
  background: -moz-linear-gradient(#edf6f9 0%, #cde5ee 100%);
  background: -o-linear-gradient(#edf6f9 0%, #cde5ee 100%);
  background: linear-gradient(#edf6f9 0%, #cde5ee 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#edf6f9', endColorstr='#cde5ee', GradientType=0);
  color: #527988;
  box-shadow: 0px 0px 10pc #c9c9c9
}

#botao:hover {
  background: #cde5ee;
  background: -moz-linear-gradient(top, #cde5ee 0%, #edf6f9 100%);
  background: -webkit-linear-gradient(top, #cde5ee 0%, #edf6f9 100%);
  background: linear-gradient(to bottom, #cde5ee 0%, #edf6f9 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cde5ee', endColorstr='#edf6f9', GradientType=0);
  cursor: pointer;
}

input[type='reset']{
  border: none;
  background: inherit;
  cursor: inherit
}
<div id=botoes>

  <div id="botao">
    <input type="submit" name="enviar" value="Enviar">
  </div>

  <div id="botao">
    <input type="reset" name="limpar" value="Reset">
  </div>

  <div id="lembrar-senha">
    <input type="checkbox" />Lembrar senha
  </div>

5
  • Jovem... só uma coisinha pra vc testar ai. Tenta colocar um padding de 50px nessa div, ou então muda a cor do gradiente do red para blue. Vc vai ver que o gradient erdado pelo input fica bugado, pois ele não tem a mesma altura do pai. O ideal seria mesmo remover a div envolta do input e estilizar o input, com o inherit o gradiente do filho não "casa" com o do pai
    – hugocsl
    29/08/2018 às 14:18
  • É esse o cenário que o AP colocou na pergunta dele? 29/08/2018 às 14:20
  • 1
    Só fiz um comentário para vc testa ai jovem, da uma testadinha no que falei, como a cor do gradiente dele é suave fica difícil notar, mas se o gradiente for mais acentuado entre a primeira e a segunda cor vc vai ver que não fica legal. Faz o teste ai rapidão usa esse gradiente linear-gradient(to bottom, red 0%, blue 100%) vc vai ver que herdando o gradiente não fica com as cores alinhadas. O padding sugeri só pra ficar mais fácil de vc ver. Mas vc pode só testar com outra cor. De boa foi só um comentário pra vc testar e avaliar.
    – hugocsl
    29/08/2018 às 14:24
  • 1
    Também falei de boa. =) 29/08/2018 às 14:26
  • 1
    Legal que vc levou na boa, é pq aqui tem gente que tem o ego nas alturas e não aceita nem comentário, ou nem para pra pensar 2x antes de sai negativando. Só dei a dica pq quando eu abri no meu monitor mesmo a cor sendo suave eu vi que deu uma quebra no gradiente, ai te sugeri fazer o teste. Se outra pessoa aplicar o exemplo com outras cores pode resultar em um efeito indesejado. Tmj
    – hugocsl
    29/08/2018 às 14:28

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .