I need to create a shape via css so that the user knows he has selected a button

Asked

Viewed 39 times

0

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

Does anyone have an idea what I can do? Basically as the page is large, I need to let the customer know that they are selected.

CSS of the button:

.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;
}
html css

  • The problem is that I do not know how to add Jquery in a wordpress plaster. Some plugin to indicate me?

  • With CSS you can use a a:focus { seu css }, but when he clicks on another place from your screen <a> will lose the CSS... If this way is enough for you I can post an answer

  • Unfortunately, it won’t do either. Maybe a form of "back to top", but in the selection buttons would help, however I would have to do this via plugin, because I do not have access to the FTP of this page.

  • If you have access to CSS you resolve it partially using :Focus. I’m talking about CSS :Focus and not JS . Focus you would need plugin etc...

  • The solutions presented in the submitted topic need editing in html. I can’t even create a class in html, I only have access to css and plugins.

  • There’s some link inside that <a> ? When you click on this btn, does it add something in the URL bar of the site? Type: meusite.com.br/#dolname ?

  • <a href="#" class="Purchase" title="Select">Select</a>

  • Worse than not changing the link bro, in fact apparently this page is not even html. You click on everything and the link does not change, but if you click on "reserve" it goes on the selected item.

Show 3 more comments

2 answers

1

To do this type of event via CSS I don’t know. But with jQuery you can do so:

#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>

  • Juliano Nunes, even if it is with JS, has any way to add JS without access to the pages? Any plugin that does this?

-1

Add the selector active on your button.

Example:

button:active {
  background-color: yellow;
}

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.