Hi @mahyulan ,
Glad you reached out! Happy to help.
Moreover, please excuse the slow turnaround here.
I understand where you’re coming from. Oftentimes, it can be challenging to edit certain aspects of the forms made using the Visual Form Builder using CSS.
Currently, there is no easy way to edit the hover color of the buttons in the Visual Form Builder. However, there’s a feature request for what you’re asking about:?https://feedback.givewp.com/feature-requests/p/visual-form-builder-there-should-be-a-setting-to-change-the-hover-colors-of-the.
We are actively tracking user feedback to understand further the needs you all have. You can use the link to check in for updates or to provide additional details of your own. I would encourage you to comment on that post about the impact this would have on your organization. Information like that is always helpful for our teams to see. I’ve also linked your ticket internally, so if this feature request is developed, we can reach out to update you.
Give the post above a look, and let me know if there are any additional details you would like me to add. I want to ensure your need is as accurately reflected as possible, and I’m happy to include an internal note to our teams with any specific information you would like them to have.
For now, you can use this CSS to accomplish that.
.givewp-donation-form__steps-button-next:hover{
background-color: yellow; /* change this to your preferred background color*/
color: blue; /* change this to your preferred text color */
}
You still have to edit the hex values to your preferred color, but that should give you some rails to run on.
Take note that this doesn’t affect the arrows on the buttons, and it can be difficult to style them. My main advice would be to just hide them using this CSS:
.givewp-donation-form__steps-button-next:after{
display: none;
}
Another way to attack this would be to use the CSS filter property and change the buttons colors on hover, as you’ll be able to include the arrows using this option. It can be more difficult, however, as you’ll have to adjust the filter properties properly to get the proper color that you want. You can read more about that in here — https://www.w3schools.com/cssref/css3_pr_filter.php.
Finally, you’ll have to enter these codes on the Custom Styles section of the design tab, as you can see here — https://share.zight.com/v1uqJj91. This encapsulates the CSS code to the form itself so that your other forms will not get altered.
Please note that these code snippets are provided as an example of how you can extend GiveWP with code. It’s up to you to implement and customize to your liking. We cannot provide support for custom code on your website, only the code that we create and distribute.
You can read more about this in here — https://givewp.com/documentation/core/give-forms/visual-form-builder/#designing-your-form.
Please let me know if you have further questions.
I’m always happy to help!
