Botão fixo e whatsapp

Bom dia a todos, gostaria de uma orientação como deixar o botao fixo e whats na fixo ao inves de deixar ao passar o mouse como a foto abaixo.

image

1 curtida

Pelo que vi só via CSS, o conjunto de elementos está junto com esse botão conferir na posição fixed, dai tem que colocar position relative para o botão fica fixo la embaixo e também colocar a opacidade 1 fixa e não na hover, dai dps tem que colocar o botão “Conferir” em posição ao passar o mouse por cima, usa css

conseguiria me orientar onde eu faço esses ajustes?

Bom dia @O_Zara fiz algumas alterações referente ao que me passou e não tive algum exito com os mesmos, acredito que fiz alguma coisa errada pois não sou um grande conhecedor de Css apenas fuço e vou tentar melhorar meu conhecimento.

Na primeira vez usei
.listagem-item .acoes-produto {
position: initial!important;
opacity: 1!important;
transition: none!important;
}
Mas acabou não atualizando, em sequencia lendo seu comentario acima deixei ele como relativo.
.listagem-item .acoes-produto {
position: relative !important;
opacity: 1!important;
transition: none!important;
}

Verificando alguns post referente a isso tentei usar esse comando.

.listagem-item .acoes-produto {
opacity: 1;
border: none;
transition: none 0s ease 0s;
display: flex;
align-items: center;
justify-content: space-between;
bottom: 0;
background: white;
}

.listagem-item .acoes-produto .botao-comprar {
width: 90%;
padding: 0px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1vw;
font-weight: bold;
border-radius: 2px;
margin: 0px auto;
color: white ;
text-transform: lowercase;
background: var(–cor-botao);
}

.listagem-item .acoes-produto .botao-comprar-ajax {
width: 55%;
margin: 0;
}

Porem não obtive erro, se alguém puder me ajudar…

tenta esse cóodigo:

.listagem.com-caixa .listagem-item .acoes-produto {
padding: 0px;
position: relative;
opacity: 1;
bottom: 0px;
}

#corpo .listagem .listagem-item:hover .acoes-produto {
bottom: 0px !important;
}

#corpo .listagem .listagem-item:hover .acoes-produto a.botao.botao-comprar.principal {
left: 0px;
opacity: 1;
width: -webkit-fill-available;
bottom: auto;
transform: translateY(-515%);
}

#corpo .listagem .listagem-item .acoes-produto a.botao.botao-comprar.principal {
left: 0px;
opacity: 1;
width: -webkit-fill-available;
bottom: auto;
transform: translateY(0%);
}

Muito Obrigado deu super certo ele fixo a unica coisa que o botão COMPRE AGORA sobe, teria como deixar fixo tbm, grato pela ajuda.

1 curtida

troca esse código que te enviei por esse:

.listagem.com-caixa .listagem-item .acoes-produto {
padding: 0px;
position: relative;
opacity: 1;
bottom: 0px;
}

#corpo .listagem .listagem-item:hover .acoes-produto {
bottom: 0px !important;
}

#corpo .listagem .listagem-item:hover .acoes-produto a.botao.botao-comprar.principal {
left: 0px;
opacity: 1;
width: -webkit-fill-available;
bottom: auto;
transform: translateY(0%);
}

#corpo .listagem .listagem-item .acoes-produto a.botao.botao-comprar.principal {
left: 0px;
opacity: 1;
width: -webkit-fill-available;
bottom: auto;
transform: translateY(0%);
}
1 curtida

Ele ficou desconfigurado e so aparece quando o mouse fica em cima

Muito Obrigado deu certo !

Gratidão e obrigado pela ajuda @O_Zara e ao @Paulo21 por me conceder os códigos para chegarmos a essa solução.

2 curtidas