Docs

[Chgrim]

Hi,

I am doing a pop that I need to have a custom button look for.

About Us

If you scroll down on this page just a bit you can see the popup. I would like to have the button centered, red background with white text, and flat without the shadow. How would I go about doing this?

Here is the code I added in covert plug to get what I have now.
[button type="real" color="green" shape="rounded" size="regular" href="/out/luuup/" title="Example"]Get 10% off[/button]

Thanks so much
Chris

[Prasant Rai]

Hello Chris,

Thanks for writing in!

You can add this under Custom > CSS in the Customizer:

.col-lg-12.col-md-12.col-sm-12.col-xs-12.cp-form-container a.x-btn.x-btn-real.x-btn-rounded.x-btn-regular {box-shadow: none !important;background-color: #F44336 !important;}

.col-lg-12.col-md-12.col-sm-12.col-xs-12.cp-form-container .custom-html-form {
    text-align: center;
}

Thanks.

[Friech]

Hi Chris,

Thanks for writing in! First please update your shortcode to this:

[x_button type="flat" shape="rounded" size="regular" href="/out/luuup/" title="Example" class="btn-green"]Get 10% off[/x_button]

And then add this on your custom CSS on Customizer.

.custom-html-form {text-align: center;}

/*normal state*/
a.btn-green {
    text-shadow: none !important;
    background-color: red;
    color: white;
    border-width: 0;
}

/*hover state*/
a.btn-green:hover {
	background-color: white;
	color: red;
	border-width: 1px;
}

Feel free to change those color values.

Hope it helps, Cheers!

[Chgrim]

That worked Great!!! Thanks so much

[Joao]

Great to hear it 🙂

[Author]

Posts