HTML
<div class="pa4-l">
<form class="bg-light-red mw7 center pa4 br2-ns ba b--black-10">
<fieldset class="cf bn ma0 pa0">
<legend class="pa0 f5 f4-ns mb3 black-80">Sign up for our newsletter</legend>
<div class="cf">
<label class="clip" for="email-address">Email Address</label>
<input class="f6 f5-l input-reset bn fl black-80 bg-white pa3 lh-solid w-100 w-75-m w-80-l br2-ns br--left-ns" placeholder="Your Email Address" type="text" name="email-address" value="" id="email-address">
<input class="f6 f5-l button-reset fl pv3 tc bn bg-animate bg-black-70 hover-bg-black white pointer w-100 w-25-m w-20-l br2-ns br--right-ns" type="submit" value="Subscribe">
</div>
</fieldset>
</form>
</div>
css
.ba {
border-style: solid;
border-width: 1px;
}
.bn {
border-style: none;
border-width: 0;
}
.b--black-10 {
border-color: rgba(0, 0, 0, .1);
}
.cf:before, .cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
.fl {
float: left;
_display: inline;
}
.input-reset {
-webkit-appearance: none;
-moz-appearance: none;
}
.button-reset::-moz-focus-inner, .input-reset::-moz-focus-inner {
border: 0;
padding: 0;
}
.lh-solid {
line-height: 1;
}
.mw7 {
max-width: 48rem;
}
.w-100 {
width: 100%;
}
.black-80 {
color: rgba(0, 0, 0, .8);
}
.white {
color: #fff;
}
.bg-black-70 {
background-color: rgba(0, 0, 0, .7);
}
.bg-white {
background-color: #fff;
}
.bg-light-red {
background-color: #ff725c;
}
.hover-bg-black:hover {
background-color: #000;
}
.hover-bg-black:focus {
background-color: #000;
}
.pa0 {
padding: 0;
}
.pa3 {
padding: 1rem;
}
.pa4 {
padding: 2rem;
}
.pv3 {
padding-top: 1rem;
padding-bottom: 1rem;
}
.ma0 {
margin: 0;
}
.mb3 {
margin-bottom: 1rem;
}
.tc {
text-align: center;
}
.f5 {
font-size: 1rem;
}
.f6 {
font-size: .875rem;
}
.center {
margin-right: auto;
margin-left: auto;
}
.clip {
position: fixed !important;
_position: absolute !important;
clip: rect(1px 1px 1px 1px);
clip: rect(1px, 1px, 1px, 1px);
}
.pointer:hover {
cursor: pointer;
}
.bg-animate, .bg-animate:hover, .bg-animate:focus {
transition: background-color .15s ease-in-out;
}
@media screen and (min-width: 30em) {
.br2-ns {
border-radius: .25rem;
}
.br--right-ns {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.br--left-ns {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.f4-ns {
font-size: 1.25rem;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.w-25-m {
width: 25%;
}
.w-75-m {
width: 75%;
}
}
@media screen and (min-width: 60em) {
.w-20-l {
width: 20%;
}
.w-80-l {
width: 80%;
}
.pa4-l {
padding: 2rem;
}
.f5-l {
font-size: 1rem;
}
}