Entrar Ainda não tem acesso?
1
resposta

Praticano o que aprendi 4

por Jorge Henrique Nicolau da Silva
| 55.3k xp | 71 posts

Eu estou praticando o que eu aprendi e estou com dificuldades de estilizar os códigos da botões no código html e css , para enter melhor aqui tá o código

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>10 maiores religião do mundo</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1 class="título">As religião com mais fies do mundo são!</h1>
        <section class="botões">
            <button>Cristianismo</button>
            <button>Islamismo</button>
            <button>Hinduísmo</button>
            <button>Silhismo</button>
            <button>Judaísmo</button>
            <button>Espiritismo</button>
            <button>Bahaísmo</button>
            <button>Xintoísmo</button>
            <button>Zoroastrismo</button>
        </section>

Já o código css!

.título { text-align: center; background-color: blue; color: red; font-style: italic; }

.botões { text-align: center; width: 0%; padding: 20px; }

Eu consigui estilizar a classe titulo mais classe botões eu to tendo não conseguindo muda a cor e formato tanto dos botões quanto das letras inseridas nos botões pode me da uma dica de como fazer isto?

1 resposta
por Mike de Sousa
| 1483.3k xp | 2706 posts
Alura Scuba Team Suporte Educacional

Olá, Jorge, como vai?

No seu código, a classe .botões está com width: 0%, o que pode impedir que os botões sejam exibidos corretamente. Além disso, para estilizar os botões diretamente, você pode usar a tag button dentro da classe .botões. Por exemplo:

.botões {
    text-align: center;
    padding: 20px;
}

.botões button {
    background-color: blue;
    color: white; 
    border: none; 
    padding: 10px 20px;
    margin: 5px; 
    cursor: pointer; 
    border-radius: 5px; 
}

Veja nesse link como fica.

Espero ter ajudado!

Siga firme nos seus estudos e conte com o fórum sempre que precisar!

Abraços :)

Caso este post tenha lhe ajudado, por favor, marcar como solucionado