Onclick on X-PRO button

Support
#1

Hi there,

I want to add a ‘onclick event’ to a button in PRO with the pro-styling (so not by HTML).
Is there a possibility to do this?

Thanks a lot!

Jeroen

#2

Hello Jeroen,

Thanks for asking. :slight_smile:

You can use following code in text or raw content element.

<button class="x-btn x-btn-regular" onclick="alert('Hello Jeroen')">Button Text</button>

Thanks.

#3

Hi Prasant,

Thanks for your fast response.
I found already some code like this on this forum, but when i’m using “simple” html it isn’t possible to style my button like others in pro. Is there a solution to have best of both worlds?

Thanks a lot.

#4

Hello @team4animation,

Thanks for updating the thread. :slight_smile:

You can add a custom class name into the button code to style the element as per your requirement.

<button class="x-btn x-btn-regular button-click-style" onclick="alert('Hello Jeroen')">Button Text</button>

After that you can add following CSS under Pro >Theme Options > CSS to style button:

.button-click-style {
    color: #484444;
    background-color: #ededed;
    border-color: #ddd;
    text-shadow: 0 0.075em 0.075em rgba(216, 163, 163, 0.5);
    box-shadow: 0 0.25em 0 0 #afabab, 0 4px 9px rgba(0,0,0,0.75);
    border-radius: 0.75em;
}

You can replace class name button-click-style as per requirement. Please note that above codes I have shared is to help you get started. Custom codes are known to create conflicts. In that scenario it would be difficult for us to provide support for issues arising because of custom codes.

Thanks.

#5

Hi Prasant,

Thanks a lot! I’ll try.

Jeroen

#6

Let us know the result.

Thanks

#7

It worked. Thanks!