Transformar uma tag a em botão com CSS
Muitas vezes o estilo que vem como padrão na tag a do HTML não serve para os layouts, por isso vamos aprender a transformar uma tag em botão com CSS
Conheça nosso canal no YouTube, com cursos gratuitos de qualidade e vídeos semanais, para acessar o canal clique aqui!
Transformar tag a em botão com CSS: teoria
Precisamos as vezes mudar completamente a aparência de elementos no HTML
Este é o caso da tag de links, quando precisamos transformar a tag a em botão
Pois muitos links nas páginas web tem realmente um estilo bem diferente daquele padrão sublinhado, que aparece nas páginas
Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.
Podemos tentar resolver o problema trocando o elemento a por um button e fazer um evento no JavaScript
Mas neste caso estaríamos aumentando o nível de complexidade do código e também a quantidade de recursos para atingir um objetivo simples
Que seria: mudar de link clicando em um elemento
Então o jeito mais simples, performático e efetivo é fazer essa mudança só no estilo, com CSS
Transformar tag a em botão com CSS: prática
Vamos ver na prática essa transformação
Veja um exemplo:
<a href=”#”>Clique aqui!</a>Com este código, temos apenas um link normal do HTML
Agora adicionando um pouco de CSS:
a {display: block;width: 160px;height: 40px;line-height: 40px;padding: 10px 5px;margin: 20px;background-color: #000;color: #FFF;border-radius: 5px;text-decoration: none;text-align: center;font-weight: bold;font-family: Arial;}
Veja a transformação:
Veja que há uma estrutura semelhante a um botão no código, tudo feito por CSS sem modificar a tag
Então mantemos o efeito do link, sem qualquer transtorno adicional, legal né? 😀
Outra coisa que pode ser feita para se deixar mais legal ainda, é adicionar uma transição com o pseudo-elemento :hover
Para uma mudança sutil de cores, assim você pode deixar o design moderno também
Conclusão
Neste artigo vimos que é possível mudar a aparência de uma tag a para que se pareça com um botão
Assim não precisamos fazer modificações bruscas no nosso código, apenas adicionar CSS
E por hoje é isso, até o próximo post!
Confira também nosso curso de HTML e CSS gratuito no YouTube clicando aqui! Onde criamos um site do 0 até o resposivo
