Boa tarde! Como eu faço para deixar o fundo da aba categorias azul e ao clicar nos itens do menu tambem? Alguem poderia me ajudar?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Boa tarde! Como eu faço para deixar o fundo da aba categorias azul e ao clicar nos itens do menu tambem? Alguem poderia me ajudar?
Olá Lucas, tudo bem ? Acredito que isso que esteja buscando:
<style>
.menu {
display: flex;
gap: 10px;
}
.item {
padding: 10px 20px;
background: lightgray;
border-radius: 5px;
cursor: pointer;
transition: 0.2s;
}
/* Muda cor quando passa o mouse */
.item:hover {
background: gray;
color: white;
}
/* Muda cor quando clica (fica focado) */
.item:focus {
background: steelblue;
color: white;
outline: none;
}
</style>
<div class="menu">
<button class="item">Home</button>
<button class="item">Sobre</button>
<button class="item">Contato</button>
</div>
Caso queira saber mais pesquise por pseudo classes (Pseudo-class)
Espero ter ajudado.