Button widget showing up weird

Hi ulinkexec,

Could you please send me an export for this widget? To do this open up the page with the widget, and click prebuilt layouts. Then click import / export and then click download. Please upload the export to a 3rd party file hosting site such as teknik.io.

Hi,

thanks. I dropped the file in teknik.io.

Please take a look.

I think this is the link ： https://u.teknik.io/uHZtA.json

Hi ulinkexec,

The issue here is that you’ve tried to use our Button widget to do this with the intention of using ninja forms. You should use a text widget instead as that won’t cause the double button effect.

I see. Is it possible for the button widget to open as a lightbox?

Hi ulinkexec,

At this time, the button widget is mainly intended to be used more of a fancy link. I would recommend using the text link instead and styling it like the button. If you need help with this I can help with this.

That’ll be great, can you help me out with styling the text like a button?

Hi ulinkexec,

Okay so replace your broken button with a text widget with the following contents:

<a href="#contact_form_pop" class="button fancybox-inline homepage-cta">Test</a> 

<div class="fancybox-hidden"><div id="contact_form_pop"> [ninja_forms id=1]</div></div>

Then, you’ll want to add some CSS. If you navigate to Appearance > Custom CSS, you’ll get our custom CSS editor. Just add the following code.

.widget a.homepage-cta {
   font-size: 1.15em;
    padding: 1em 2em;
    background: #ffa800;
    color: #ffffff !important;
    border: 1px solid #ffa800;
    border-width: 1px 0;
    -webkit-border-radius: 0.25em;
    -moz-border-radius: 0.25em;
    border-radius: 0.25em;
    text-shadow: 0 1px 0 rgba(0,0,0,0.05);
}

You might also need to install the SiteOrigin CSS Editor.