How to set background color for popup button?

[Max]

Hi Sir,
I purchased the Easy FancyBox Pro plugin, I want to use it with Contact Form 7 and make a popup effect, I already installed Contact Form 7 and the Easy FancyBox plugins.

I found instruction on Internet to make popup effect by using such code as follows:

<a href="#contact_form_pop" class="fancybox">Contact Us</a>
<div style="display:none" class="fancybox-hidden">
    <div id="contact_form_pop">
        [contact-form-7 id="XX" title="Contact form 1"]
    </div>
</div>

The popup button is Contact Us and it works, now I want to add rectangle (with round border) background for the words “Contact Us” and fill the rectangle with certain color.

How should I do to make the effect?

Your reply will be appreciated.

[RavanH]

Hi Max,

To make a link look like a button, you can use CSS style rules. First give the link a specific class like “button-link”:

<a href="#contact_form_pop" class="button-link fancybox">Contact Us</a>

Then open your themes stylesheet in the theme editor or, if you are not using your own custom theme, install JetPack and activate the Custom CSS module. Then you’ll have a new page called Edit CSS in the Appearance admin section where you can add any style rules you like.

Now for the style rules themselves I can suggest a good tutorial like:
http://usabilitypost.com/2012/01/10/pressed-button-state-with-css3/

Hope that helps you create a nice looking button 🙂

[Max]

Thanks for your kind reply, Ravan.

I thought I can set background for Contact Us button by using the Easy FancyBox Pro plugin as I saw support for “Background color, Opacity and Border radius for rounded corners” in the introduction, it seems I did not understand it in a right way.

How can I send you a private message? May I know you mail address or something like that?

[Max]

Can anyone reply me?

Need some help here, thanks.

[Max]

Hi Sir,

I know how to make pop-up contact form by using easy fancy box, but do not know how to make a button design come with the pop-up

below is code for pop-up contact form

<a href="#contact_form_pop" class="fancybox">Contact Us</a>
<div style="display:none" class="fancybox-hidden">
    <div id="contact_form_pop">
        [contact-form-7 id="XX" title="Contact form 1"]
    </div>
</div>

and here is the button design instruction of the theme I want to use, http://hogash-demo.com/kallyas_wp/button-designs/

I just do not know how to combine them to make the words “Contact Us” show on a button.

Can you please help?

Thanks a lot.

[RavanH]

Hi Max, this is all part of the theme. Not something that is controlled by FancyBox. Background/color options are about the lightbox frame, not the link on your page…

Reading the theme instructions there quickly, I would guess something like the example under “Anchor element” might work for you:

<a href="#contact_form_pop" class="fancybox btn btn-large btn-primary disabled">Contact Us</a>

[Author]

Posts