I need to create a form via css so that the user knows that they have selected a [duplicate]

0

My company has a template in WP granted by another in which we do not have access to FTP, only editions of CSS. But clicking on the select page does nothing. I tried to add a color change to the button, but it only changes while it is pressed, so it did not work.

Does anyone have an idea of what I can do? Basically because the page is large, I need to click the button to let the customer know that it is selected.

Button CSS:

.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;
}
    
asked by anonymous 13.09.2018 / 15:05

2 answers

1

To do this type of event via CSS I do not know. But with jQuery you can do this:

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

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

Add the active selector on your button.

Example:

button:active {
  background-color: yellow;
}
    
13.09.2018 / 15:52