ddonuts Posted October 4, 2020 Report Share Posted October 4, 2020 Hi there, I am not usually a coder, but I have a Wordpress site with a Mailchimp form that I have been customizing. I want the Submit button to zoom on hover. I've looked at examples of this on the web, but have been unsuccessful in making it work. I have a CSS plugin in which I have entered the following code. So far, it all works. Can anyone tell me how to add the zoom on hover code? /* Add a Border Around the Form*/ #mc_embed_signup { border-color: #000000; border-width: 1px; border-style: solid; } /* Add Padding Around the Mailchimp Form*/ #mc_embed_signup { padding: 20px; } /* Customize the Header*/ #mc_embed_signup h2 { font-size: 24px; text-transform: uppercase; margin-bottom: 30px; color: #000000; text-align: center; } /* Customize the Subscribe Button*/ #mc_embed_signup .subscribe-button { background-color: #0EAD69; padding: 12px 50px; border-radius: 50px; border-color: #738DFF; color: #ffffff; font-size: 16px; display: block; margin-right: auto; margin-left: auto; } /* Change Colour of Subscribe Button on Hover*/ #mc_embed_signup .subscribe-button:hover { background-color: #738DFF; color: #ffffff; display: inline-block; display: block; margin-right: auto; margin-left: auto; } #mc_embed_signup .required-email { color: #A8A3A2; font-style: italic; background-color: #fff; border-color: #000000; } #mc_embed_signup .first-name { color : #A8A3A2; font-style: italic; background-color: #fff; border-color: #000000; margin-bottom: 10px; } Link to comment Share on other sites More sharing options...
shaili_shah Posted October 16, 2020 Report Share Posted October 16, 2020 Hello, Good morning. Just write this in your existing code. /* Change Colour of Subscribe Button on Hover*/ #mc_embed_signup .subscribe-button:hover { background-color: #738DFF; color: #ffffff; display: inline-block; display: block; margin-right: auto; margin-left: auto; transform: scale(1.5); } And use "transition: transform .2s;" in your button class for better visualization. This will zoom slowly. Hope you understand it. Thanks! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now