Override MailChimp stylesheet with second stylesheet

Question

Goal: change background color of "Subscribe" button on MailChimp embedded sign-up form on company website page

Question: MailChimp gives the CSS hook "input.button" to style the Subscribe button. How do I use this CSS to override the styles already in place?

The page I would like to edit: http://www.sieralearn.com/subscribe/

Here is how the button is written in the HTML of the page:

<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>

As far as I can tell, I don't have access to the stylesheet used by MailChimp to generate the embed code (http://cdn-images.mailchimp.com/embedcode/classic-081711.css). Here is how the styles appear in the MailChimp stylesheet:

#mc_embed_signup .button {clear:both; background-color: #aaa; border: 0 none; border-radius:4px; color: #FFFFFF; cursor: pointer; display: inline-block; font-size:15px; font-weight: bold; height: 32px; line-height: 32px; margin: 0 5px 10px 0; padding: 0 22px; text-align: center; text-decoration: none; vertical-align: top; white-space: nowrap; width: auto;}

Thank you for any and all assistance.

Answer 1

Sorry, I'm too new to simply comment, but can't you simply copy the content of their stylesheet (http://cdn-images.mailchimp.com/embedcode/classic-081711.css) into a new stylesheet of your own, and reference your new one (in place of the old one) on your subscribe page? You can then change any of the design elements you wish without fouling up the ones you like.

Answer 2

I implemented this on my blog one year ago and I was planning to write a tutorial, but I think this answer on SO will help people. I have created a fiddle with the required HTML and CSS used to style the opt-in Mailchimp form.

The input.button can be styled completely as you wish, and here's the piece of code that changes the entire button, but you can wish to just change the background-color. If you want to have a look at a detailed form styling, refer to the fiddle attached as it has more niceties.

input.button {
    -moz-box-shadow:inset 0 1px 0 0 #bbdaf7;
    -webkit-box-shadow:inset 0 1px 0 0 #bbdaf7;
    box-shadow:inset 0 1px 0 0 #bbdaf7;
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5));
    background:-moz-linear-gradient(center top, #79bbff 5%, #378de5 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5');
    background-color:#79bbff;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #84bbf3;
    display:inline-block;
    color:#fff;
    font-family:arial;
    font-size:16px;
    font-weight:700;
    padding:7px 32px;
    text-decoration:none;
    text-shadow:1px 1px 0 #528ecc;
}

Might wish to change the :hover with this piece of CSS.

input[class=button]:hover {
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff));
    background:-moz-linear-gradient(center top, #378de5 5%, #79bbff 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff');
    background-color:#378de5
}

The HTML markup.

<div class="bu1">
     <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
 </div>

The final result.

Another option (not tested) is to do this in your custom style sheet or wherever:

#mc_embed_signup .button { background-color:lightcoral; }

The effect, as tested using Chrome Developer Tools is shown below.