Title: Submit Button Hoverable Last modified: August 31, 2016 --- # Submit Button Hoverable * Resolved [pevu2020](https://wordpress.org/support/users/pevu2020/) * (@pevu2020) * [10 years, 2 months ago](https://wordpress.org/support/topic/submit-button-hoverable/) * Hello, I am sure that this is possible but I don’t know hot to activate it. As topic of this post states I would like to make submit button hoverable (changing appearance when mouse is over the button). Please help me out because I am struggling a bit with this. * Also, how to remove gaps between forms. I would like to achieve effect like on the link below: [http://www.demarastudio.com/contact/](http://www.demarastudio.com/contact/) * All the best * [https://wordpress.org/plugins/quick-contact-form/](https://wordpress.org/plugins/quick-contact-form/) Viewing 15 replies - 1 through 15 (of 15 total) * [Graham](https://wordpress.org/support/users/aerin/) * (@aerin) * [10 years, 2 months ago](https://wordpress.org/support/topic/submit-button-hoverable/#post-7186110) * Adding a hover is easy. * All you need is the hover state on the submit button ID. So for example on the default form the CSS would be: * .qcf-style.default #submit:hover{color:red;} * To remove the margins add the style: * .qcf-style input[type=”text”] {margin: 0 0 0 0;} * I could probably add this as a styling option. I didn’t bother with the hover on the submit button because nobody asked for it and it doesn’t work on a touch screen. * If you send me an email I’ll send you an update to test. * Thread Starter [pevu2020](https://wordpress.org/support/users/pevu2020/) * (@pevu2020) * [10 years, 2 months ago](https://wordpress.org/support/topic/submit-button-hoverable/#post-7186125) * Hello, I will be happy to have a try and test your update. My e-mail address: pevu2020(at)gmail.com * [Graham](https://wordpress.org/support/users/aerin/) * (@aerin) * [10 years, 1 month ago](https://wordpress.org/support/topic/submit-button-hoverable/#post-7186191) * Just sent you an update to test. * You can see the results here: [http://testblog.co.uk/contact-forms/](http://testblog.co.uk/contact-forms/) * Thread Starter [pevu2020](https://wordpress.org/support/users/pevu2020/) * (@pevu2020) * [10 years, 1 month ago](https://wordpress.org/support/topic/submit-button-hoverable/#post-7186192) * Hi there, Just tested new updated version. It looks great. * All the best mate 🙂 * Thread Starter [pevu2020](https://wordpress.org/support/users/pevu2020/) * (@pevu2020) * [10 years, 1 month ago](https://wordpress.org/support/topic/submit-button-hoverable/#post-7186229) * Hello Aerin, * I can not make it work on my page. I have used code lines you sent me: .qcf- style input[type=”text”] {margin: 0 0 0 0;} .qcf-style.default #submit:hover{ color:red;} in Styling -> Custom CSS -> Use Custom CSS and it does not work. * It works nice on your test page u sent me. But that is pretty much it. Am I doing something wrong mate ? * All the best 🙂 * [Graham](https://wordpress.org/support/users/aerin/) * (@aerin) * [10 years, 1 month ago](https://wordpress.org/support/topic/submit-button-hoverable/#post-7186230) * You shouldn’t need the custom CSS. There is now an option to add the hover colour in the Submit button styles. * But if you want to use the custom CSS, just change .default to the name of your form. * Thread Starter [pevu2020](https://wordpress.org/support/users/pevu2020/) * (@pevu2020) * [10 years, 1 month ago](https://wordpress.org/support/topic/submit-button-hoverable/#post-7186231) * HI mate. I think that I have lost my mind. Your plugin didn’t update – at least doesn’t look like. I cant seem to find any update from you, apart from link you sent me for testing. When I check your plugin on wordpress plugin page – version didn’t change and I cant update it from my wordpress plugin menu as well. * I should let you know that I am no expert in that field just started wordpress adventure 🙂 * Please advise * All the best mate * [Graham](https://wordpress.org/support/users/aerin/) * (@aerin) * [10 years, 1 month ago](https://wordpress.org/support/topic/submit-button-hoverable/#post-7186232) * I sent it to the email address you published 2 weeks ago. * However, here’s a link to the download: [https://quick-plugins.com/wp-content/uploads/quick-contact-form.zip](https://quick-plugins.com/wp-content/uploads/quick-contact-form.zip) * I haven’t published it yet as I’m waiting for a sponsor to fix their site. * Thread Starter [pevu2020](https://wordpress.org/support/users/pevu2020/) * (@pevu2020) * [10 years, 1 month ago](https://wordpress.org/support/topic/submit-button-hoverable/#post-7186233) * Hello, That is why 🙂 I didn’t get zip file last time. Thank you for the link. Will play around with new features 😀 * All the best mate * Thread Starter [pevu2020](https://wordpress.org/support/users/pevu2020/) * (@pevu2020) * [10 years, 1 month ago](https://wordpress.org/support/topic/submit-button-hoverable/#post-7186234) * HI mate, It looks like that even when margins are set to 0 there is a small gap between fields and line overlap between “Subject” and “Message” and even bigger gap on Error Messages. Additionally how to remove gap between button and fields so to achieve one solid block. One more thing for the future, maybe it would be nice to have an option to change border and text for hover button. * All the best mate * Links to my style settings: [https://dl.dropboxusercontent.com/u/5531443/Screen%20Shot%202016-04-06%20at%2013.01.19.png](https://dl.dropboxusercontent.com/u/5531443/Screen%20Shot%202016-04-06%20at%2013.01.19.png) * Links to contact form: [https://dl.dropboxusercontent.com/u/5531443/Screen%20Shot%202016-04-06%20at%2012.56.27.png](https://dl.dropboxusercontent.com/u/5531443/Screen%20Shot%202016-04-06%20at%2012.56.27.png) * [https://dl.dropboxusercontent.com/u/5531443/Screen%20Shot%202016-04-06%20at%2012.56.32.png](https://dl.dropboxusercontent.com/u/5531443/Screen%20Shot%202016-04-06%20at%2012.56.32.png) * [Graham](https://wordpress.org/support/users/aerin/) * (@aerin) * [10 years, 1 month ago](https://wordpress.org/support/topic/submit-button-hoverable/#post-7186235) * Try setting the top margin to -2px. * It’s always going to be a bit iffy getting the solid block you want as each field will overlap the next. And it’s quite possible your theme is overriding the plugin settings which is why there is are odd gaps. * I really need to inspect the code to find out what’s happening. Can you email me a link to the live site? * Thread Starter [pevu2020](https://wordpress.org/support/users/pevu2020/) * (@pevu2020) * [10 years, 1 month ago](https://wordpress.org/support/topic/submit-button-hoverable/#post-7186236) * Hello, Website is not live yet. I have it on my MAMP server so far. The last bit I am working on is that contact form and after its finished I will go live with it. * If you will have any ideas how to solve it let me know 🙂 Any advice how to move button up to the “message” field ? * All the best mate. * Thread Starter [pevu2020](https://wordpress.org/support/users/pevu2020/) * (@pevu2020) * [10 years, 1 month ago](https://wordpress.org/support/topic/submit-button-hoverable/#post-7186237) * Hello again 🙂 It looks like I have manage to make it work with this settings: margin: -2px 0px -8px 0px; padding: 10px; Links below, but only thing that bothers me is that I had to change padding and this actually changed displaying of a text in the fields from centred to bottom aligned – which is not that big concern but it looks odd. It seems that I can not make padding bigger than 10. Everything above 10 makes top line from “Name” field not visible or changing its appearance. * Any ideas ? * All the best mate * Thread Starter [pevu2020](https://wordpress.org/support/users/pevu2020/) * (@pevu2020) * [10 years, 1 month ago](https://wordpress.org/support/topic/submit-button-hoverable/#post-7186238) * Forgot to add links: [https://dl.dropboxusercontent.com/u/5531443/Screen%20Shot%202016-04-06%20at%2014.28.07.png](https://dl.dropboxusercontent.com/u/5531443/Screen%20Shot%202016-04-06%20at%2014.28.07.png) * [https://dl.dropboxusercontent.com/u/5531443/Screen%20Shot%202016-04-06%20at%2014.28.13.png](https://dl.dropboxusercontent.com/u/5531443/Screen%20Shot%202016-04-06%20at%2014.28.13.png) * [https://dl.dropboxusercontent.com/u/5531443/Screen%20Shot%202016-04-06%20at%2014.35.31.png](https://dl.dropboxusercontent.com/u/5531443/Screen%20Shot%202016-04-06%20at%2014.35.31.png) * [Graham](https://wordpress.org/support/users/aerin/) * (@aerin) * [10 years, 1 month ago](https://wordpress.org/support/topic/submit-button-hoverable/#post-7186239) * This is what happens when you start fiddling with margins and padding. What you have done with your settings is layer the fields on top of each other which is why they don’t line up properly. * The only way to fix this is to inspect the code. Go live with the site but put the contact form on an orphan page. Send me the link and I can’t the browser code inspector to find the problem. * Or you can use the code inspector on your browser. It’s not something I can fix without access to the code. Viewing 15 replies - 1 through 15 (of 15 total) The topic ‘Submit Button Hoverable’ is closed to new replies. * ![](https://ps.w.org/quick-contact-form/assets/icon-128x128.png?rev=1068066) * [Quick Contact Form](https://wordpress.org/plugins/quick-contact-form/) * [Frequently Asked Questions](https://wordpress.org/plugins/quick-contact-form/#faq) * [Support Threads](https://wordpress.org/support/plugin/quick-contact-form/) * [Active Topics](https://wordpress.org/support/plugin/quick-contact-form/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/quick-contact-form/unresolved/) * [Reviews](https://wordpress.org/support/plugin/quick-contact-form/reviews/) * 15 replies * 2 participants * Last reply from: [Graham](https://wordpress.org/support/users/aerin/) * Last activity: [10 years, 1 month ago](https://wordpress.org/support/topic/submit-button-hoverable/#post-7186239) * Status: resolved