Alteração de CSS

Layout
1

Como alterar a cor do botão de comprar para verde, com o CSS?

2

@Jessica_Rodrigues é o botão comprar da página do produto?
Se for usa este código abaixo, é só colar no Editar CSS.

/* Deixa botão comprar verde */
    .produto .acoes-produto .comprar a {
        background: #208010;
        opacity: 1;
        box-sizing: border-box;
        line-height: 50px;
        text-decoration: none;
        text-shadow: none;
        font-size: 18px;
        text-transform: uppercase;
        position: relative;
        transition: background ease-out .2s;
        border-radius: 0;
        border: 0;
        padding: 0 15px;
        display: block;
        font-weight: 500;
    }

/* Deixa hover botão comprar verde */
.produto .acoes-produto .comprar a:hover {
    background-color: #38923d;
}

Esse aqui é para o botão finalizar no carrinho de compras:

/* Deixa botão finalizar verde*/
.finalizar-compra .botao.principal {
    background: #208010;
    opacity: 1;
    border: 0;
    border-radius: 2px;
    height: 52px;
    padding: 0 60px;
    box-sizing: border-box;
    line-height: 52px;
    text-decoration: none;
    text-shadow: none;
    font-size: 20px;
    text-transform: uppercase;
    position: relative;
    transition: background ease-out .2s;
    font-weight: 700;
    padding: 0 47px;
}

/* Deixa hover botão finalizar verde */
.finalizar-compra .botao.principal:hover {
    background-color: #38923d;
}
2 curtidas
3

oie… é só colar tudo isso lá né? se não der certo é só apagar?

4

@Jessica_Rodrigues isso mesmo, se não funcionar apaga os códigos que tudo volta ao normal, por isso é sempre bom colocar o nome do código entre barras e asteristicos /* nome do código */ serve para orientar a gente e não apagarmos o código errado. Editei o código acima e acrescentei também do botão finalizar compra no carrinho, vai ficar verde também.

1 curtida
5

Pedro, muito obrigado pela ajuda, deu certo sim :grinning:
Agora se eu quiser colocar um verde mais claro é só trocar o codigo da cor né?

Acho q um mais claro vai combinar mais com meu site rs

6

@Jessica_Rodrigues isso mesmo, para mudar a cor é só trocar o código da cor nessa parte do código >> background: #208010; você altera no código do botão comprar e no código do botão finalizar.

1 curtida
7

Obaaaa deu certo… sem querer abusar consegue me passar o codigo do botão “Ver mais detalhes” ? rs queria colocar verde tbm rs

8

@Jessica_Rodrigues testa o código abaixo, já está no verde claro que você está usando nos outros botões.

/* Deixa Ver mais detalhes verde */
    .listagem-item .acoes-produto a.botao {
        position: absolute;
        top: 10%;
        bottom: 0;
        right: 0;
        left: 0;
        margin: auto;
        height: 50px;
        background: #06e68f;
        font-size: 0;
        border-radius: 0;
        border: 0;
        padding: 0;
        text-transform: uppercase;
        text-shadow: none;
        transition: opacity ease-out .2s,transform ease-out .2s;
        transform: scale(.9);
        color: #fff;
    }
1 curtida
9

Deu certo, amei, ficou muito lindo… vc é D+, muito obrigado:wink:

10

Oi Pedro, poderia me ajudar?
eu gostaria de colocar o botão ver detalhes abaixo da foto, até consegui o código, mas ele cobre o nome do produto. Tem como deixar entre a foto e o nome do produto?

obrigada

1 curtida
11

Oi Pedro você tem o código para alterar a cor do botão Finalizar Compra da página de Pagamento? Quero deixar verde também! Obrigada!

12

E SE FOR BOTÃO DE OPÇÕES NA PAGINA DO PRODUTO?

https://graficacuiabashop.lojaintegrada.com.br/cartao-de-visita-

QUAL CODIGO USAR?

13

Solicito há semanas uma ajuda que deve ser bem simples e ninguém aparece par ajudar, infelizmente.

Minha dúvida é: Como aumentar o tamanho do botão “Alterar forma de pagamento”
( os clientes alegam que “não enxergam” ele na versão mobile )

Apenas isso.

14

Fala Pedro, muito obrigado por compartihar o cod. Uma dúvida, o botão da home não alterou, o que eu devo fazer?

Eu quero deixar tudo chapado.

image