-
Posts
-
Hello,
how can I get the Gravity Forms Submit button rounded and gradient like in this pic “Download now”. Furthermore also like in this pic I like put on left side of “Button” the text “Required fields” and above the button area a text area.
Thanks in advance for your support
Likewise – how do you change the promo button to match the plain flat color button on a submit button of a form?
Since there is a moderator here can you look at http://vintagewineliquordiberville.com/ I also posted a comment under install not working. Thanks Josue
Hi Alex,
This CSS will do it:
.av_promobox .avia-button { background-image: none; font-size: 13px; font-weight: normal; }Regards,
JosueWait, one more question. How do I also make it so that, just like the submit button on a contact us form, when you hove your mouse over the button, the color changes from the main theme color to the main theme highlight color? For instance, look at the submit button on this reply to form and you will see what I mean. I basically want my promo box button to look and behave exactly like that one.
Thanks!
Hi,
Please add following code for hover state of your promobox buttons
.av_promobox .avia-button:hover { background-color:blue; }Regards,
YigitWhile you’re there looking to see what I mean about making the promo code button look and behave exactly like the submit form (email) button, maybe you can check the website on mobile (iOS). The parallax images are shown at full size on mobile and not cropped shorter as described in the other thread I started on this forum.
Thanks for the code, when I put it in to quick css, it didn’t work. I had to add it to edit css for the main theme. Is this a bug or how it’s supposed to work. As it stands, I have not been able to add ANY code in to quick css and have it work. It’s not like I’m adding lines and lines of code. Maybe 2-3 tops.
I added the code with the color as #88bbc8, but now that is a orange border around the promo box button when it turns blue as I hover over it. It looks strange. Take a quick look. Perhaps what I want done just isn’t possible without a lot of editing.
Hi,
Here is the code for button border.
.av_promobox .avia-button:hover { border-color: #88bbc8; }Regards,
YigitI’d also like to add that the promo button doesn’t have that cool fade in effect that transitions between the two colors like the submit button does. hover your mouse over the submit button below this reply to and you’ll see what I mean. How do I add that cool effect?
Thanks, that code worked like a charm. Lastly and I promise it’s the last question for this button change I want to do, how do I add that fade in effect between color changes when you hover over the button?
Hi,
You should add following code to Quick CSS
.av_promobox .avia-button { background-image: none; font-size: 13px; font-weight: normal; transition: background 0.5s; -webkit-transition: background 0.5s; } .av_promobox .avia-button:hover { background-color:blue; border-color: #88bbc8; transition: background 0.5s; -webkit-transition: background 0.5s; transition: border-color 0.5s; -webkit-transition: border-color 0.5s; }Regards,
YigitSooooooo close. The transition is weird. The transition seems to only happen after you move your mouse off the button, but not as you move it onto it. Also, for some reason the transition of the border as you move your mouse off is slower that the transition of the main button.
Wait, figured it out. Removed the border by adding border: none to .avia-button and then removed the border-color transitions entirely and now it looks and behaves exactly like the submit button!
Give this man a raise, because he surely deserves one! Thanks a lot Yigit!
Manueldes, try this site for the css code for a button that might look like that:
http://www.cssbuttongenerator.com
Where you put the code it generates is beyond me though. Maybe Yigit knows or has a different solution.
What is happened with my topic??? :)
Sorry I was a bit bussy and but now I´m again here. My question was simple. I want style the button of Gravity Forms, get the sentence “Required fields” right of button and get a few text bellow the button like the attachment pic.Thanks Alex for the link, I try it later.
Hi Yigit, tell me please only, how can I get the Gravity Forms button like “Promo Box Button”, this is greater and nicer :)
ThanksHi!
This is the css code for the promo button:
body div .avia-button { border-radius: 3px; background-image: url("../images/layout/bg-button.png"); background-repeat: repeat-x; background-position: 0 0; padding: 10px; font-size: 12px; text-decoration: none; display: inline-block; border-style: solid; border-width: 1px; margin: 3px 0; line-height: 1.2em; position: relative; font-weight: 600; text-align: center; max-width: 100%; } .avia-button.avia-size-large { padding: 13px 30px; font-size: 14px; min-width: 127px; } body .avia-button.avia-color-theme-color, body .avia-button.avia-color-theme-color:hover { color: #fff; color: rgba(0, 0, 0, 0.5); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1); } #top .main_color .avia-color-theme-color { color: red; }You can use the google chrome to inspect the Gravity Forms button then apply the css codes above. A link to your site will help.
Best regards,
Ismael
- The topic ‘Styling Button – Gravity Forms’ is closed to new replies.