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

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 é apenas: 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