Jump to content

How to zoom on hover with Mailchimp form


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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...