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 botao capa

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

tag a em botao exemplo

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:

tag a em botao ex 2

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 😀

Subscribe
Notify of
guest

4 Comentários
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Rivaldo

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

Battisti

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

VnOses

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;
}

Sidnei de Medeiros Vicente

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 »