Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • May 5, 2017 at 2:37 pm #788407
    Wordpressed

    Hi Support Team,

    I would like to make my Gravity Forms button transparent white and overall resemble the Enfold buttons I’m using on the site. I contacted Gravity to ask them how to code that but they have asked me to check with you.

    Would you be kind enough to let me have some CSS to change the button, please? There are examples of how I’m using the Enfold buttons on the homepage.

    Thank you very much.

    May 5, 2017 at 2:55 pm #788416
    Yigit

    Hey WordPressed,Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    #top .gform_wrapper input[type="submit"] {
    color: #fff;
    border: 3px solid #fff;
    background: transparent;
    padding: 15px 30px 13px;
    font-size: 13px;
    min-width: 139px;
    border-radius: 3px;
}

    Best regards,
    Yigit

    May 6, 2017 at 10:39 am #788774
    Wordpressed

    Hi Yigit, thank you for the code but unfortunately it didn’t work but I changed first line to body .gform_wrapper .gform_footer input[type=submit] and that did work. It looks perfect, thank you!

    I notice the mouseover effect is not present on it, though, do you know if it would be simple enough to create the same mouseover effect on the form button as per the Enfold button, please?

    May 7, 2017 at 9:08 pm #789186
    Basilis

    Hi,

    If you use the following, it will work on hover

    #top .gform_wrapper input[type=”submit”]::hover {
    color: #fff;
    border: 3px solid #fff;
    background: transparent;
    padding: 15px 30px 13px;
    font-size: 13px;
    min-width: 139px;
    border-radius: 3px;
    }

    Best regards,
    Basilis

    May 22, 2017 at 2:41 pm #797660
    Wordpressed

    Hi Basilis,

    Unfortunately the hover effect isn’t working.

    This is the code I currently have for the button. Are you able to spot this issue?

    body .gform_wrapper .gform_footer input[type=submit]{
    color: #fff;
    border: 3px solid #fff;
    background: transparent;
    padding: 15px 30px 13px;
    font-size: 13px;
    min-width: 139px;
    border-radius: 3px;
    }

    #top .gform_wrapper input[type=”submit”]::hover {
    color: #fff;
    border: 3px solid #fff;
    background: transparent;
    padding: 15px 30px 13px;
    font-size: 13px;
    min-width: 139px;
    border-radius: 3px;
    }

    May 22, 2017 at 9:22 pm #797917
    Yigit

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

    body .gform_wrapper .gform_footer input[type=submit]:hover {
    opacity: 0.7;
}

    Best regards,
    Yigit

    May 23, 2017 at 12:18 pm #798215
    Wordpressed

    That works great, thank you!

    May 23, 2017 at 1:11 pm #798246
    Yigit

    Hi,

    You are welcome! :)

    For your information, you can take a look at Enfold documentation here – http://kriesi.at/documentation/enfold/
    And if there are features that you wish Enfold had, you can request them and vote the requested ones here – https://kriesi.at/support/enfold-feature-requests/
    For any other questions or issues, feel free to post them here on the forum and we will gladly try to help you :)

    Best regards,
    Yigit

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘CSS code for transparent button on Gravtiy Forms’ is closed to new replies.