<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div id="newsletter-container"> <div class="container"> <div class="row"> <div class="col-md-12 col-sm-12 col-xs-12 clearfix"> <h3>Sign up to receive the latest news</h3> <form id="register-newsletter"> <input type="text" name="newsletter" required="" placeholder="Enter your email address"> <input type="submit" class="btn btn-custom-3" value="SIGN UP"> </form> </div> </div> </div </div>

#newsletter-container { background: #CFCECE; padding: 27px 0; } #newsletter-container h3 { font-size: 25px; line-height: 46px; color: #444b4c; text-transform: uppercase; margin: 0; float: left; } h3 { font: 19px/38px Arial,sans-serif; margin: 50px 0 20px; color: #e3e3e3; text-transform: uppercase; } #newsletter-container form { float: right; } #newsletter-container input[type=text] { height: 46px; width: 300px; vertical-align: top; margin-right: 5px; border-radius: 4px; border: 3px solid #84bb26; background: #CFCECE; line-height: 20px; padding: 5px 10px 5px 20px; color: #727b7c; } input, select, textarea { outline: 0; } #newsletter-container .btn { padding: 12px 20px; font-size: 17px; line-height: 20px; } .btn-custom-3 { color: #fff; background-color: #575a59; border-color: #5c5f5e; -webkit-box-shadow: inset 0 1px 1px rgba(255,255,255,.4); box-shadow: inset 0 1px 1px rgba(255,255,255,.4); } .btn-custom-3:hover { color: #fff; background-color: #84bb26; border-color: #94CF2E; -webkit-box-shadow: inset 0 1px 1px rgba(255,255,255,.4); box-shadow: inset 0 1px 1px rgba(255,255,255,.4); } ::selection { background-color: #7bae23; color: #fff; }