[contegi66Participant]

Hi Support,

I’ve searched the forum, found and tried related posts, but still need your help. Here’s my situation:

Client would like that buttons site wide have 3 different color and styles depending actions: 1 for normal button (green font on white background), 1 for mouse-over (white font on green background) [until there no problem] … and 1 when clicking on the button (white font on blue background).

Could you tell me how to do this last part (clicking)?

Thank you in advance,
Gianni

[RadModerator]

Hi there,

Thanks for posting in.

This should able to help you, https://community.theme.co/kb/implementing-additional-button-colors/

Basically, you have to do it similar to :hover, but as :active. Like this,

.x-btn.my-btn:active {
  color: #ffffff;
  border-color: #600900;
  background-color: #ef2201;
  -webkit-box-shadow: 0 0.25em 0 0 #a71000, 0 4px 9px rgba(0, 0, 0, 0.75);
          box-shadow: 0 0.25em 0 0 #a71000, 0 4px 9px rgba(0, 0, 0, 0.75);
}

You may also provide your url in question, we could check it and provide more exact css.

Thanks!

[contegi66Participant]

This reply has been marked as private.

[NicoModerator]

Hi There,

Try adding this in your customizer’s custom CSS:

.x-btn:active{
    color: #ffffff;
    background-color: #1f82c0;
}

Let us know how it goes.

Thanks.

[contegi66Participant]

Hi Support,

I have two other questions related to buttons.

1) I want to get rid of global button text shadow. I add this code found on the forum:
.x-btn, .x-btn:hover, .button, .button:hover, [type=”submit”], [type=”submit”]:hover{
text-shadow:none;
-moz-text-shadow:none;
-webkit-text-shadow:none;
}
but nothing happened. where am I wrong?
question 1 solved.

2) I want to add a new button with different style than the global one (flat, large, white font and blue background). I red the thread on Implementing Additional Button Colors but I do not understand where I should put [button class=”my-btn” href=”#” title=”Title”]. Should I use it a text element instead of a button element? I am a bit lost as you can imagine coding is not my cup of tea.

Thank you in advance for letting me know.
Best,
Gianni

[LelyModerator]

Hello Gianni,

1.) Please change above CSS to this:

.x-btn, .x-btn:hover, .button, .button:hover, [type="submit"], [type="submit"]:hover{
text-shadow:none !important;
-moz-text-shadow:none !important;
-webkit-text-shadow:none !important;
}

There’s a more specific CSS that was overriding your custom code, adding !important will make sure that it will be applied.

2.) Please note that there are two ways to use an element. Either a shortcode or the element in Cornerstone. If you prefer shortcode, you have to insert the shortcode inside Raw Content element or Text element inside Cornerstone. Then there’s a button element on Cornerstone.

The example on this article:https://community.theme.co/kb/implementing-additional-button-colors/ is a button shortcode. Add a Raw Content element or Text element in Cornerstone and copy
[button class="my-btn" href="#" title="Title"]

On the other hand, you may use Button element directly. Then on the class field, add your custom button class like my-btn on the sample link.

They are the same. Just different way of implementation.

Hope this helps.

[contegi66Participant]

Hi Support,

Point 1: works fine now … thank you very much!

Point 2: Buttons were inserted by using Button element directly: therefore I add my-btn on the class field and add in customizer this sample code from the article you mentioned, but nothing happened 🙁

.x-btn.my-btn {
color: #1F82C0;
border-color: #ac1100;
background-color: #ff2a13;
}

.x-btn.my-btn:hover {
color: #0A2C40;
border-color: #600900;
background-color: #ef2201;
}

any guess why?

Gianni

[contegi66Participant]

well, never mind Guys,… if I do not save it it won’t work of course:::

[Prasant RaiModerator]

Good to hear you figured it out! Let us know if you have any other questions. 🙂

[Author]

Posts