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
Formação Claude Code
Domine Claude Code do absoluto zero até o avançado
- 120 aulas
- 4 projetos
- 9h 45min
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
Matheus Battisti
Formações
Formação Vibe Coding
Do Prompt ao Produto: Crie Software Real com IA
- 474 aulas
- 20 projetos
- 39h 27min
Blog | Mais populares
Como fazer um select mudar de URL/link
Tags HTML: comandos e códigos básico a avançado
O conhecimento das principais tags HTML é vital para qualquer programador front-end, pois elas são a base da estrutura de qualquer página web. O HTML […]
Como fazer input de password com olho de mostrar senha
O que é o input type password? Antes de sair codando, bora entender a base O input type password é o campo de senha do […]
Bacana, mas quando eu tenho incluir no CSS ele altera todos os links do meu website, tem como eu dizer que essa modificação é para somente um link! Aguardo…
Obrigado
opa Rivaldo, adiciona um id na tag a que tu quer alterar, e depois faz os estilos apenas para este id, aí só vai mudar um link
Utilize seletor ID para um único elemento que queira modificar, ex:
HTML
<body>
<a href=”#” id=”link-personalizado”> Clique Aqui </a>
</body>
CSS
#link-personalizado{
background-color: red;
color: white;
}
Matheus gostei demais dessa dica! só que fui implementar e nao tá funcionando. Porque tô usando o pacote react-scroll com o elemento Link – que substitui a tag “a” – e quando eu crio o style com o nome Link e vou importar diz que o nome é duplicado. E se eu troco o nome compila mas nao reconhece o estilo. esse é o arquivo style.ts com os estilos import styled from “styled-components”; export const Container = styled.div</span> <span style="color: rgb(15, 74, 133);"> display: flex;</span> <span style="color: rgb(15, 74, 133);"> margin-bottom: 3rem;</span> <span style="color: rgb(15, 74, 133);"> align-items: center;</span> <span… Read more »