harsher harsher - 1 month ago 9
CSS Question

Need support with CSS (position and hover effect)?

This is my Mailchimp code for subscribe form. I have customized it suiting to my needs.


  1. The red button appears below ..but i want to shift it beside(on same level)(right) the email box.

  2. And how to give hover effect(to black) to the button.



I have tried all attempts but nothing is working for me. Hope, someone could help. I am new to CSS. 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&amp;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>




Answer

You need to give fixed size to container of input and input button and then give with 100% to inputbox and float right to button then it will exjact right side and below of input box. Add these changes.

#mailchimp {
   width: 400px; // give it a fixed size
}
#mailchimp input {
   width: 100%; //give with 100% to it
   box-sizing:border-box;
}
#mailchimp input[type="submit"]  {
   float: right;
}
#mailchimp input[type="submit"]:hover {
   background-color:black;
   color: white;
}

EDIT Change your css and html as below.

 #mailchimp {
      background: #383838;
      color: #ff2727;
      padding: 40px 15px;
      width: 400px; 
    }
    #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: 100%; //give with 100% to it
      box-sizing:border-box;
    }
    #mailchimp input.email {
      background: #fff;
    }
    #mailchimp input.name {
      background: #fff;
    }
    .mc-field-group {
        width: 60%;
        float: left;
    }
    #mailchimp input[type="submit"] {
      background: #ff2727;
      color: #fff;
      cursor: pointer;
      font-size: 20px;
      width: 40%;
      padding: 8px 0;
      float: right;
    }
    #mailchimp input[type="submit"]:hover {
       background-color:black;
       color: white;
    }

and your html like this

 <div id="mailchimp">
<form action="//askchange.us11.list-manage.com/subscribe/post?u=32e8df9557dd399bb3ba2ae61&amp;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 class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></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>
</form>
</div>