HTML
<article class="pa4 black-80">
<form action="sign-up_submit" method="get" accept-charset="utf-8">
<fieldset id="sign_up" class="ba b--transparent ph0 mh0">
<legend class="ph0 mh0 fw6 clip">Sign Up</legend>
<div class="mt3">
<label class="db fw4 lh-copy f6" for="email-address">Email address</label>
<input class="pa2 input-reset ba bg-transparent w-100 measure" type="email" name="email-address" id="email-address">
</div>
<div class="mt3">
<label class="db fw4 lh-copy f6" for="password">Password</label>
<input class="b pa2 input-reset ba bg-transparent" type="password" name="password" id="password">
</div>
</fieldset>
<div class="mt3"><input class="b ph3 pv2 input-reset ba b--black bg-transparent grow pointer f6" type="submit" value="Sign Up"></div>
</form>
</article>
css
.ba {
border-style: solid;
border-width: 1px;
}
.b--black {
border-color: #000;
}
.b--transparent {
border-color: transparent;
}
.db {
display: block;
}
.b {
font-weight: bold;
}
.fw4 {
font-weight: 400;
}
.fw6 {
font-weight: 600;
}
.input-reset {
-webkit-appearance: none;
-moz-appearance: none;
}
.input-reset::-moz-focus-inner {
border: 0;
padding: 0;
}
.lh-copy {
line-height: 1.5;
}
.w-100 {
width: 100%;
}
.black-80 {
color: rgba(0, 0, 0, .8);
}
.bg-transparent {
background-color: transparent;
}
.pa2 {
padding: .5rem;
}
.pa4 {
padding: 2rem;
}
.pv2 {
padding-top: .5rem;
padding-bottom: .5rem;
}
.ph0 {
padding-left: 0;
padding-right: 0;
}
.ph3 {
padding-left: 1rem;
padding-right: 1rem;
}
.mt3 {
margin-top: 1rem;
}
.mh0 {
margin-left: 0;
margin-right: 0;
}
.f6 {
font-size: .875rem;
}
.measure {
max-width: 30em;
}
.clip {
position: fixed !important;
_position: absolute !important;
clip: rect(1px 1px 1px 1px);
clip: rect(1px, 1px, 1px, 1px);
}
.grow {
-moz-osx-font-smoothing: grayscale;
backface-visibility: hidden;
transform: translateZ(0);
transition: transform .25s ease-out;
}
.grow:hover, .grow:focus {
transform: scale(1.05);
}
.grow:active {
transform: scale(.9);
}
.pointer:hover {
cursor: pointer;
}