How to edit this button to look like the theme style

[tonenugen]

hello everyone, thanks for your time.

I created a button called “J’adhère” with Popup maker plugin with the code [popup_trigger id=“369” tag=“button”]J’adhère[/popup_trigger]. the button functions as normal however it looks generic and i would like the button to be to like my other button on the page.
http://akkhaya.ngo/donation/

I tried styling the button using the class tag like so [popup_trigger id=“369” tag=“button” classes=“background-color:#00a4ab”]J’adhère[/popup_trigger]. But this did nothing.

please advise. I would like the button style to be same as the rest on the theme.

much appreciated.

Toan

[mldarshana]

Hi There,

Thanks for writing in! You can assign the following classes to your button.
x-btn x-btn-large

So it will render as other X theme buttons.

Hope that helps.

[tonenugen]

Thanks so much Darshana, that worked well. But is there a way I change customise the color to blue or something?

Cheers

[thai]

Hi There,

Please try with this shortcode:

[popup_trigger class="x-btn x-btn-large" style="background: #2167d0;border-color: #283850;" id="369" tag="button"]J'adhère[/popup_trigger]

Hope it helps

[tonenugen]

Hello Thai,

thanks for the shortcode, however, the color remained the same. do you have other suggestions?

Cheers, Toan

[friech]

Hi Toan,

Please add another class to your button shortcode x-btn-blue then add this to Theme Options > CSS

/*initial state*/
.x-btn.x-btn-blue {
	background-color: #03a9f4;
	border-color: blue;
	color: white;
}

/*hover state*/
.x-btn.x-btn-blue:hover {
	background-color: blue;
	border-color: #03a9f4;
	color: #000;
}

Feel free to change those color values.

But before you add that, please address the missing bracket first, or else its not going to work.

Hope it helps,
Cheers!

[tonenugen]

Thank you brother, this worked exactly as I wanted. Appreciate the clear instructions.

Namaste, Toan

[christopher]

Glad that we could be of a help