HTML
<form>
<h1><span>Sign in</span></h1>
<input placeholder="Username" type="text"/>
<input placeholder="Password" type="password"/>
<button class="btn">Log in</button>
<h6>Social Account</h6>
<div class="social">
<button class="tw btn">Twitter</button>
<button class="fb btn">Facebook</button>
<button class="google fb btn">Google+</button>
</div>
</form>
CSS
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
display: block;
}
html {
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
input:focus, textarea:focus {
outline: none;
}
label, select, button, input[type="submit"], input[type="radio"], input[type="checkbox"] input[type="button"] {
cursor: pointer;
}
a, a:visited, a:active {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
::selection {
background: #ed327b;
color: #fff;
}
::-moz-selection {
background: #ed327b;
color: #fff;
}
* {
font-size: 100%;
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: #3498db;
}
* {
font-family: "Helvetica Neue", Helvetica, Arial;
}
h5 {
text-align: center;
margin-top: 5px;
color: rgba(0, 0, 0, .3);
}
h5>a, a:visited {
color: #fff;
text-decoration: underline;
}
h5>a:hover {
text-decoration: none;
}
form {
background: #fff;
border-radius: 6px;
padding: 20px;
padding-top: 30px;
width: 300px;
margin: 50px auto;
box-shadow: 15px 15px 0px rgba(0, 0, 0, .1);
}
h1 {
text-align: center;
font-size: 1.4em;
font-weight: 700;
color: #ccc;
margin-bottom: 24px;
}
span {
font-weight: 200;
}
input {
width: 100%;
background: #f5f5f5;
border: 0;
padding: 20px;
border-radius: 6px;
margin-bottom: 10px;
border: 1px solid #eee;
}
.btn {
position: relative;
width: 100%;
padding: 20px;
border-radius: 6px;
border: 0;
background: #f26964;
font-size: 1.2em;
color: #fff;
text-shadow: 1px 1px 0px rgba(0, 0, 0, .1);
box-shadow: 0px 3px 0px #c1524e;
}
.btn:active {
top: 3px;
box-shadow: none;
}
h6 {
text-align: center;
padding: 20px;
padding-top: 35px;
color: #777;
cursor: pointer;
}
.social {
display: none;
}
.fb {
margin-top: 15px;
background: #3b5998;
box-shadow: 0px 3px 0px #2c416e;
}
.tw {
background: #00acee;
box-shadow: 0px 3px 0px #008dc3;
}
.google {
background: #db4a39;
box-shadow: 0px 3px 0px #b93f31;
}
