Como alterar a cor do botão de comprar para verde, com o CSS?
@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;
}
oie… é só colar tudo isso lá né? se não der certo é só apagar?
@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.
Pedro, muito obrigado pela ajuda, deu certo sim
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
@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.
Obaaaa deu certo… sem querer abusar consegue me passar o codigo do botão “Ver mais detalhes” ? rs queria colocar verde tbm rs
@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;
}
Deu certo, amei, ficou muito lindo… vc é D+, muito obrigado:wink:
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
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!
E SE FOR BOTÃO DE OPÇÕES NA PAGINA DO PRODUTO?
https://graficacuiabashop.lojaintegrada.com.br/cartao-de-visita-
QUAL CODIGO USAR?
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.
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.