Jump to content

How to zoom on hover with Mailchimp form


ddonuts
 Share

Recommended Posts

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

  • 2 weeks later...

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...