I have created a custom Mailchimp subscribe form code that suits my specific needs.
The red button currently appears below the email box, but I would like to shift it to the right and on the same level as the email box.
Additionally, I am looking to add a hover effect to the button (changing its color to black).
Despite trying various methods, I have been unsuccessful in achieving these changes. As a newcomer to CSS, any assistance offered would be greatly appreciated. Thank you.
#mailchimp {
background: #383838;
color: #ff2727;
padding: 40px 15px;
}
#mailchimp input {
border: medium none;
color: gray;
font-family: times new roman;
font-size: 16px;
font-style: bold;
margin-bottom: 15px;
padding: 10px 12px;
width: 350px;
}
#mailchimp input.email {
background: #fff;
}
#mailchimp input.name {
background: #fff;
}
#mailchimp input[type="submit"] {
background: #ff2727;
color: #fff;
cursor: pointer;
font-size: 20px;
width: 40%;
padding: 8px 0;
}
#mailchimp input[type="submit"]:hover {
color: #000000;
}<div id="mailchimp">
<form action="//askchange.us11.list-manage.com/subscribe/post?u=32e8df9557dd399bb3ba2ae61&id=62317f4783" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
<input type="email" value="Enter your email" name="EMAIL" SIZE="30" class="required email" id="mce-EMAIL"onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_32e8df9557dd399bb3ba2ae61_62317f4783" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>