submit button

Viewing 8 replies - 1 through 8 (of 8 total)
  • Rolf Allard van Hagen

    (@ravanh)

    10 years, 3 months ago

    You could give the link an extra class like class="fancybox-inline button" (supposing you where using fancybox-inline before) and then add some style rules to your themes style.css to target this link.

    Something like:

    .button {
  display: inline-block;
  color: #fff!important;
  text-decoration: none;
  background-color: #67b94f;
  background: -moz-linear-gradient(top, #e4bc1e 0%, #d4aa07 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e4bc1e), color-stop(100%,#d4aa07));
  background: -webkit-linear-gradient(top, #e4bc1e 0%,#d4aa07 100%);
  background: -o-linear-gradient(top, #e4bc1e 0%,#d4aa07 100%);
  background: -ms-linear-gradient(top, #e4bc1e 0%,#d4aa07 100%);
  background: linear-gradient(to bottom, #e4bc1e 0%,#d4aa07 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4bc1e', endColorstr='#d4aa07',GradientType=0 );
  font-size: 1.0em;
  padding: 5px 7px;
  border: 1px solid #d4aa07;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}
.button:hover {
  text-decoration: none;
  background-color: #67b94f;
  background: -moz-linear-gradient(top, #d4aa07 0%, #e4bc1e 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d4aa07), color-stop(100%,#e4bc1e));
  background: -webkit-linear-gradient(top, #d4aa07 0%,#e4bc1e 100%);
  background: -o-linear-gradient(top, #d4aa07 0%,#e4bc1e 100%);
  background: -ms-linear-gradient(top, #d4aa07 0%,#e4bc1e 100%);
  background: linear-gradient(to bottom, #d4aa07 0%,#e4bc1e 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d4aa07', endColorstr='#e4bc1e',GradientType=0 );
}

    which would create a big yellowish button… Modify at your desire 😉 and do not hesitate to reuse the class for other buttons on your site to create coherence…

    Thread Starter bladermaarraak

    (@bladermaarraak)

    10 years, 3 months ago

    Thanks for your reply:

    I have put this code in a widget:

    Contact Us

    <div style=”display:none” class=”fancybox-hidden”>
    <div id=”contact_form_pop” class=”hentry” style=”width:250px;height:100px;”>
    [si-contact-form form=’1′]
    </div>
    </div>

    Should i replace ‘fancybox’ by ‘fancybox-inline button’ in the widget, or somewhere else?

    Thank you for your patience!

    Thread Starter bladermaarraak

    (@bladermaarraak)

    10 years, 3 months ago

    in stead of the contact button, i meant to say: a href=”#contact_form_pop” class=”fancybox”>Contact Us

    Rolf Allard van Hagen

    (@ravanh)

    10 years, 3 months ago

    Yes, you should not use class=’fancybox’ (reserved for images) but class=’fancybox-inline’ for inline content. Also make sure you activate the Inline Content section on your Settings > Media admin page.

    Next, adding the ‘button’ class will allow you to dedicate specific styling to the link as per example.

    Thread Starter bladermaarraak

    (@bladermaarraak)

    10 years, 3 months ago

    Thank you.

    I think i did something wrong:

    I first activated the inline content section.
    In the text widget i have the following code:

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

<div style="display:none" class="fancybox-hidden">
    <div id="contact_form_pop" class="hentry" style="width:250px;height:100px;">
        [si-contact-form form='1']
    </div>
</div>

    Then I have paste your .button code into the style.css of my child theme. But it still shows the hyperlink and not the button.

    Do you have any idea what i dit wrong? thanks again!

    Rolf Allard van Hagen

    (@ravanh)

    10 years, 3 months ago

    In your text widget change class="fancybox-inline" to class="fancybox-inline button"

    Thread Starter bladermaarraak

    (@bladermaarraak)

    10 years, 3 months ago

    It had no effect unfortunately.

    Thread Starter bladermaarraak

    (@bladermaarraak)

    10 years, 3 months ago

    Great, i did exactly the same as yesterday, but this time it worked! Thanks.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘submit button’ is closed to new replies.