<div class="container">
<div class="row text-center">
<div class="col-lg-12">
<form>
<h2>Subscribe</h2>
<div class="form-group margin-below">
<input type="email" class="form-control" id="email" aria-describedby="Email"
placeholder="Email">
</div>
<button type="submit" class="btn2 btn-primary">Sign up</button>
</form>
</div>
</div>
</div>
label, select, button, input[type="submit"], input[type="radio"], input[type="checkbox"] input[type="button"] {
cursor: pointer;
}
body {
background: #bdc3c7; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #a8edea 0%, #fed6e3 100%); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #a8edea 0%, #fed6e3 100%); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
h2{
text-align: center;
margin-bottom: 1.8rem;
}
form {
background: #f7f4ff;
border-radius: .3rem;
padding: 1.3rem;
width: 350px;
margin: 2rem auto;
box-shadow: 12px 12px 5px 0px rgba(0, 0, 0, .08);
}
input {
width: 100%;
background: #f5f5f5;
border: 0;
padding: 20px;
border-radius: 8px;
margin-bottom: 10px;
border: 1px solid #eee;
}
.btn2 {
width: 100%;
padding: 12px;
border: 0;
background: #c3b6e2;
font-size: 1.1em;
color: #fff;
text-shadow: 1px 1px 0px rgba(0, 0, 0, .4);
box-shadow: 0px 3px 0px #ac9ad7;
margin-top: 1.2rem;
border-radius: .25rem;
}
.btn2:hover {
color: #fff;
background: #8a70c6;
border-color: #a18cd1;
}
.form-control {
display: block;
width: 100%;
padding: .5rem .75rem;
font-size: 1rem;
line-height: 1.25;
color: #55595c;
background-color: #f9f9f9;
background-image: none;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid rgba(0,0,0,.15);
border-radius: .25rem;
}
.margin-below{
margin-bottom: 1.2rem;
}
.form-control:focus {
border-color: #7743ff;
box-shadow: inset 0 1px 1px rgba(45, 45, 45, 0.07), 0 0 8px rgba(129, 129, 129, 0.6);
}
This Pen doesn't use any external JavaScript resources.