Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Btn btn-primary não permite mudar a cor pra lilás

Boa tarde, Estou enfrentando o seguinte problema: No exercício não consigo mudar a cor do btn "Ver Mais" para a cor lilás como propões o exercício. Já verifiquei e até copiei o código e nada. Quando apago o declarção do botão btn btn-primary percebo que assume a cor, porém a formatação do botão some. Acredito que a formatação padrão dobtn-primary está sobrepondo a declação da cor lilás declarada no classecor-lilas no css. Por isso não está alterando como devia. Alguém pode dar uma dica de como resolver esse problema?

CSS

        .botao-lilas{
                background-color: #9353FF;
                        }

  <div class="card">
                <svg class="bd-placeholder-img card-img-top" width="100%" height="180"
                    xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image cap"
                    preserveAspectRatio="xMidYMid slice" focusable="false">
                    <title>Placeholder</title>
                    <rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6"
                        dy=".3em">Image cap</text>
                </svg>
                <div class="card-body">
                    <h5 class="card-title">Produto</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the
                        card's content.</p>
                    <p> R$ 30,00 </p>
                    <a href="#" class="btn btn-primary botao-lilas rounded-0 border-0">Ver mais</a>
                </div>
            </div>

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

2 respostas
solução!

Oi, Wellington, tudo bem?

Como você disse a classe btn-primary pode estar sobrepondo o estilo da classe botao-lilas. Por isso uma forma de resolver esse problema é removendo apenas a classe btn-primary. Ficaria assim:

<a href="#" class="btn botao-lilas rounded-0 border-0">Ver mais</a>

Também devemos observar se na tag <head> o link para a folha de estilos onde criamos o botao-lilas está abaixo do link de estilos do Bootstrap, pois dessa forma, conseguimos fazer com que os estilos próprios que criamos sejam aplicados sobrepondo os estilos do Bootstrap. Deve estar assim:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<link rel="stylesheet" href="./assets/style.css">

Espero ter ajudado. Caso tenha dúvidas, estarei à disposição. Abraços e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!

Olá! Parece que você está enfrentando um problema para alterar a cor do botão "Ver mais" para lilás, conforme proposto no exercício.

O que pode estar acontecendo é que a classe btn-primary está sobrepondo a cor definida pela classe botao-lilas no CSS. A classe btn-primary provavelmente possui regras de estilo mais específicas ou uma prioridade maior.

Para resolver esse problema, você pode tentar algumas abordagens:

Aumentar a especificidade: Adicione uma classe adicional ao botão, como botao-vermais, e defina a cor lilás diretamente nessa classe. Por exemplo: css Copy code .botao-vermais { background-color: #9353FF; } Em seguida, atualize o elemento do botão com a nova classe:

html Copy code Ver mais Dessa forma, a classe botao-vermais terá uma especificidade maior e a cor lilás será aplicada.

Usar !important: Adicione !important à declaração da cor lilás no CSS, como mostrado abaixo: css Copy code .botao-lilas { background-color: #9353FF !important; } Essa abordagem deve garantir que a cor lilás seja aplicada, mesmo que outras regras tenham maior especificidade.

Lembre-se de verificar se o arquivo CSS está sendo corretamente incluído no seu documento HTML e se não há outros estilos conflitantes sendo aplicados ao botão.

Espero que essas dicas possam ajudar a resolver o problema!