Border CSS3 Button

[Caio Oliveira_117731 0]

Olá,

 

estou tendo algum problema com esse botão e não consigo resolver.

A borda não sai de jeito nenhum e eu também não consigo substitui-lo por um button img.

Alguém sabe onde está o problema?

Segue os códigos e imagens:

 

HTML5:

            <div class="contact-form">
                <form method="post" action="/cadastro">
                <fieldset>
                        <input class="c-m" type="text" placeholder="Seu Nome" size="20" name="nome"required> </br>
                        <input class="c-m" type="email" placeholder="Seu E-mail" size="20" name="email" required>
                        </br>
                        <input class="c-half" type="tel" placeholder="Seu Telefone" size="20" name="telefone" required>
                        <input class="c-half2" type="text" placeholder="Seu CEP" size="20" name="cep">
                        </br>        
                        <textarea class="c-obs" rows="8" placeholder="Comentario" size="800" name="obs"></textarea>
                </fieldset>
                    <input type="submit" value="ENVIAR" id="btn"/>
                </form>
</div> 

CSS3:

#btn {
  background: none;
  cursor:pointer;
  width: 200px;
  height: 100px;
  border: none;
}

#btn:hover {
  border: 0;
  background: #ffffff;
  color: #c72525;
  text-decoration: none;
}

SCREENSHOT:

 

SCREENSHOT02 (HOVER):

 

Obrigado pela atenção !

[Natan S. 6]

Você aplicou:

 

[inline] border: none;[/inline] e [inline]border: 0;[/inline].

 

Não vai aparecer borda mesmo.

Você precisa adicionar propriedade border desta forma por exemplo:

 border: 5px solid red;

Um post mais completo sobre o assunto: A propriedade border

[erickcouto 6]

Como nosso amigo acima flw, altere os valores de border para por exemplo border: 1 solid #000 ... Veja se da certo.

[Caio Oliveira_117731 0]

Obrigado pela resposta, mas voces entenderam errado, eu quero deixar o botão sem a borda cinza, quero deixa-lo do jeito da screenshot02.

[Natan S. 6]

Obrigado pela resposta, mas voces entenderam errado, eu quero deixar o botão sem a borda cinza, quero deixa-lo do jeito da screenshot02.

 

Então como você disse, ele fica sem a borda cinza no hover do elemento. Basta aplicar somente as propriedades do hover mas sem a pseudo-classe.

 

Assim:

#btn {
  width: 200px;
  height: 100px;
  border: 0;
  color: #c72525;
  background: #ffffff;
  cursor: pointer;
  text-decoration: none;
}

[erickcouto 6]

Qualquer coisa usa uma imagem como botão, ai vc deixar como quiser =D é uma opção tb ... masssss de preferencia ao código mesmo ...

[Marlon Pacheco 132]

Buenas tchê.

 

É estranho, mas o teu código deixou exatamente como você queria.

http://codepen.io/marlonlp/pen/vEmPbZ

Pelo menos o botão.