Os botões da minha página não estão ficando no design proposto :(
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!
Os botões da minha página não estão ficando no design proposto :(
No seu arquivo Post.module.css ficou faltando os seletores de classe .botaoLer e .botaoLer:hover que são os responsáveis por estilizar o botão, segue abaixo código deles:
.botaoLer {
display: inline-block;
border-radius: 24px;
padding: 0.75rem 1.5rem;
font-size: 1.125rem;
line-height: 1.125rem;
background-color: var(--azul-medio);
color: var(--branco);
border: 3px solid var(--azul-medio);
cursor: pointer;
transition: 0.2s;
}
.botaoLer:hover {
border: 3px solid var(--azul-escuro);
}Segue abaixo também o código completo do arquivo Post.module.css:
.post {
text-align: center;
width: 282px;
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.08);
border-radius: 0px 0px 10px 10px;
padding-bottom: 1.5rem;
transition: transform .2s;
}
.post:hover {
transform: translate(0, -1rem);
}
.capa {
width: 100%;
}
.titulo {
font-family: var(--fonte-secundaria);
font-size: 1.25rem;
color: var(--azul-escuro);
line-height: 1.75rem;
margin: 1.5rem 0 1.75rem;
}
.botaoLer {
display: inline-block;
border-radius: 24px;
padding: 0.75rem 1.5rem;
font-size: 1.125rem;
line-height: 1.125rem;
background-color: var(--azul-medio);
color: var(--branco);
border: 3px solid var(--azul-medio);
cursor: pointer;
transition: 0.2s;
}
.botaoLer:hover {
border: 3px solid var(--azul-escuro);
}
@media (max-width: 1100px) {
.post {
width: 336px;
}
.titulo {
font-weight: 600;
}
.botaoLer {
padding: 0.6875rem 1.5rem;
font-size: 1.375rem;
}
}