03
fev

Como criar um botão CSS: a, a:hover, a:visited, a:focus

Como criar um botão CSS clicável com efeitos a, a:hover, a:visited e a:focus

Olá Prezados leitores do Blog Dicas do Artony!

Sempre fui um apaixonado por design, desenhos em geral e todo tipo de elementos gráficos, associados ao poder do CSS. Confesso que por vezes, para mim, parecia muito distante criar algum elemento utilizando essas duas classes, as quais tanto amo! Porém, aos poucos, fui entendendo o básico dos estilos CSS. O site do maujor e o w3schools.com foram e são de suma importância no humilde avanço que tive nessa área e até hoje, ambos, sempre estão nos favoritos do meu navegador!

Quero deixar bem claro, que não sou nenhum expert no assunto, muito longe disso, não passo de um simples curioso e admirador dessa "arte"! Porém, quando algo me desperta o interesse, procuro me esforçar para chegar pelo menos, próximo daquilo que eu gostaria de ver como resultado final. Sei que isso não é fácil, afinal, não tenho nem ideia de quantas classes CSS existem, mas, vou me contentado com o que estou aprendendo!

Realmente acredito que conhecimento deve ser compartilhado, do contrário, uma conquista para o conhecedor, passa a ser um sentimento desprezível chamado egoísmo e todo o conhecimento vai por água abaixo! Seguindo nesse raciocínio, quero compartilhar com vocês, minha mais nova descoberta utilizando o poder do CSS: Um botão com efeitos a:hover, a:visited e a:focus!

  • a:hover: É a propriedade que determina a aparência de um objeto CSS, quando o mouse é colocado sobre o mesmo.
  • a:visited: É a propriedade que determina a aparência de um objeto CSS, quando o mesmo já foi clicado.
  • a:focus: É a propriedade que determina a aparência de um objeto CSS, no instante em que o mouse é clicado sobre o mesmo.

Esse objeto é indicado para quem quer dá um aspecto visual mais atraente a um link em destaque ou botão de download!

  1. Iniciamos com uma tag center: <center> e dentro dela a tag style: <style type="text/css">, isso fará o botão ficar alinhado ao centro!
  2. Damos nome ao objeto CSS, iniciando com um "#" (Jogo da velha) e finalizando com a abertura de uma chave, exemplo: #botaocss {.
  3. No botão abaixo usei apenas 3 (Três) propriedades como base: Estilo da fonte (1), tamanho da fonte (2) e largura do objeto (3) (1 "font-family", 2 "font-size" e 3 "width"). Sempre finalizamos cada etapa com o fechamento de uma chave: "}".
  4. Essa é a parte mais importante do objeto, começamos a confeccionar a aparência do botão em seu estado de espera: #botaocss a {, com os atributos "background (Cor de plano de fundo", "border (Bordas do objeto)", "border-radius (Bordas arredondadas)", "box-shadow (Sombra do objeto)", etc. e finaliza-se com: "}".
  5. Aplicamos as propriedades do objeto no estado em que o mesmo já foi clicado: #botaocss a:visited { e finaliza-se com: "}".
  6. Aplicamos as propriedades do objeto no estado em que o mouse estiver sobre o mesmo: #botaocss a:hover { e finaliza-se com: "}".
  7. Aplicamos as propriedades do objeto no momento em que o mouse é clicado sobre o mesmo: #botaocss a:focus { e finaliza-se com: "}".
  8. Fechamos a tag style com: </style> e abrimos uma classe div identificando o objeto inicial, exemplo: <div id="botaocss">
  9. Criamos um link utilizando a tag <a href="Seu link aqui" target="_blank">Seu texto visível aqui</a>
  10. Fechamos a classe div: </div> e a tag center: </center>.

E o resultado será aproximado ao do botão abaixo:

Botão CSS clicável com efeitos: a, a:hover, a:visited, a:focus!

Este texto serve apenas para ilustrar o conteúdo desta postagem. Dando uma impressão mais próxima de como os elementos podem ficar dispostos numa postagem real.


Este texto serve apenas para ilustrar o conteúdo desta postagem. Dando uma impressão mais próxima de como os elementos podem ficar dispostos numa postagem real.

Código HTML: Botão CSS clicável com efeitos: a, a:hover, a:visited, a:focus!

<center>
<style type="text/css">
#botaocss {

font-family: Arial, Trebuchet MS; /*Tipo da fonte*/
font-size: 20px; /*Tamanho da fonte*/
width: 250px; /*Largura do objeto*/
}
#botaocss a {
display: block; /*Objeto único na linha*/
background: #70B02C; /*Cor de fundo do objeto em espera*/
color: #FFFFFF; /*Cor do texto*/
text-shadow: 0px 1px 0px #111111; /*Disposição e cor da sombra do texto*/
text-align: center; /*Alinhamento do texto*/
border: solid 1px #538C17; /*Tipo e espessura da borda do objeto*/
border-radius: 5px; /*Define o arredondamento do objeto*/
box-shadow: 0px 2px 3px #A9A9A9; /*Disposição e cor da sombra do objeto*/
padding: 10px 20px 10px 20px; /*Espaçamento interno do objeto*/
margin: 0px 0px 0px 0px; /*Espaçamento externo do objeto*/
text-decoration: none; /*Decoração do texto ("none" = sem sublinhamento)*/
}
#botaocss a:visited {
background: #996699; /*Cor de fundo do objeto quando o mesmo já foi clicado*/
border: solid 1px #804B80; /*Cor da linha do objeto quando o mesmo já foi clicado*/
}
#botaocss a:hover {
background: #00ADFE; /*Cor de fundo do objeto quando o mouse está sobre o mesmo*/
border: solid 1px #088CC9; /*Cor da linha do objeto quando o mouse está sobre o mesmo*/
box-shadow: 0px 2px 3px #808080; /*Disposição e cor da sombra do objeto quando o mouse está sobre o mesmo*/
}
#botaocss a:focus {
background: #FF4747; /*Cor de fundo do objeto quando o mouse é clicado sobre o mesmo*/
border: solid 1px #CC2626; /*Cor da linha do objeto quando o mouse é clicado sobre o mesmo*/
}
</style>
<div id="botaocss">
<a href="SEU LINK AQUI" title="TÍTULO DO BOTÃO AQUI">SEU TEXTO AQUI!</a></div>
</center>

Se você quiser inserir mais de um botão, basta copiar e colar as tags: <a href="SEU LINK AQUI" title="TÍTULO DO BOTÃO AQUI">SEU TEXTO AQUI!</a>, dentro da tag: <div id=...></div>, (Sem espaços e/ou quebras de linhas) e adicionar os links desejados. O resultado de vários botões juntos é esse abaixo!

Como criar um botão CSS clicável com efeitos a, a:hover, a:visited e a:focus

No link a seguir, você encontrará uma tabela de cores com códigos HTML, para fazer as alterações de cores que você quiser! → Clique aqui! A "arte" do CSS requer muita paciência e prática, mas, é muito gratificante você poder ver se formar objetos, sobre códigos CSS.

Espero que tenham gostado dessa dica! Gostou? Compartilhe! Um abraço e até a próxima!

Para receber postagens no seu E-mail, assine nossa Newsletter! → Clique e assine agora!
Informar link quebrado eu erro nesta postagem!dicasdoartony@gmail.com

Comments (3)

Loading... Logging you in...
  • Logged in as
ola, eu fiz, mas meus botões ficam abrindo os links em nova janela, como faço pra abrir na mesma pagina?,
obrigado!
Use a tag: target="_self" após o endereço a ser acessado para abrir na mesma aba ou página!
https://i.imgur.com/OTfoc6G.png

Post a new comment

Comments by

Voltar ao topo!