0

Minha empresa tem um template em WP concedido por outra em que não temos acesso ao FTP, apenas a edições de CSS. Porém ao clicar em selecionar a página não faz nada. Tentei adicionar uma alteração de cor no botão, porém ele só altera enquanto está pressionado, então não serviu.

Alguém tem uma ideia do que posso fazer? Basicamente como a página é grande, preciso que ao clicar no botão o cliente saiba que está selecionado.

CSS do botão:

.list_options.hotels .hotel_block .rooms_options > .price a {
    color: #fff;
    font-family: Open Sans;
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    background: #00b6d4;
    background-size: 15px;
    background-color: #00b6d4;
    border-width: 0px;
    border: transparent;
    padding: 10px 20px;
    margin: '';
    display: inline-block;
    cursor: pointer;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-transition: all 0.3s ease-out 0;
    -moz-transition: all 0.3s ease-out 0;
    -o-transition: all 0.3s ease-out 0;
    transition: all 0.3s ease-out 0;
    -webkit-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    -kthtml-transition: all 0.2s ease;
    transition: all 0.2s ease;
    margin: 10px 0px 0px 0px;
    padding: 5px 10px;
}
8
  • O problema é que não sei como adicionar Jquery em um wordpress engessado. Algum plugin pra me indicar? 13/09/2018 às 13:34
  • Com CSS vc pode usar um a:focus { seu css }, mas quando ele clicar em outro lugar da tela seu <a> vai perder o CSS... Se dessa forma já for suficiente pra vc posso te postar uma resposta
    – hugocsl
    13/09/2018 às 13:46
  • Infelizmente não serve também. Talvez uma forma de "back to top", porém nos botões de seleção ajudaria, porém eu teria que fazer isso via plugin, pois não tenho acesso ao FTP dessa pagina. 13/09/2018 às 13:50
  • Se vc tem acesso ao CSS vc resolve parcialmente usando :focus. Estou falando do :focus do CSS e não do .focus do JS que vc precisaria de plugin etc...
    – hugocsl
    13/09/2018 às 13:56
  • As soluções apresentadas no tópico que enviou precisam de edição no html. Não tenho nem como criar uma class no html, só tenho acesso ao css e a plugins. 13/09/2018 às 14:09

2 Respostas 2

1

Para fazer esse tipo de evento via CSS eu desconheço. Mas com jQuery você pode fazer assim:

#btn-click{
    background-color: blue;
    padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn-click" type="button">Meu botão</button>

<script type="text/javascript">
  $("#btn-click").click(function() {
    $(this).css("background-color", "red");
  });
</script>

1
  • Juliano Nunes, mesmo que seja com JS, tem alguma forma de adicionar JS sem acesso as paginas? Algum plugin que faça isso? 13/09/2018 às 14:03
-1

Adicione o seletor active no seu button.

Exemplo:

button:active {
  background-color: yellow;
}

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .