"Daily UI #001: Sign Up"
Bootstrap 3.0.0 Snippet by harunpehlivan

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ---------->
<!--
Follow me on
HARUN PEHLİVAN : http://www.doyoubuzz.com/harun-pehlivan
Twitter: https://twitter.com/HTERCUMANP
Codepen: https://codepen.io/harunpehlivan
FOUNDER,CEO BLOGGER :)
-->
<div class="signup">
<div class="signup-connect">
<h1>Create your account</h1>
<a href="https://www.facebook.com/profile.php?id=100008152065270" class="btn btn-social btn-facebook"><i class="fa fa-facebook"></i> Sign in with Facebook</a>
<a href="https://twitter.com/HTERCUMANP" class="btn btn-social btn-twitter"><i class="fa fa-twitter"></i> Sign in with Twitter</a>
<a href="http://plus.google.com/111320383727376607540/" class="btn btn-social btn-google"><i class="fa fa-google"></i> Sign in with Google</a>
<a href="https://www.linkedin.com/in/harun-pehlivan-0aa34252" class="btn btn-social btn-linkedin"><i class="fa fa-linkedin"></i> Sign in with Linkedin</a>
</div>
<div class="signup-classic">
<h2>Or use the classical way</h2>
<form class="form">
<fieldset class="username">
<input type="text" placeholder="username" />
</fieldset>
<fieldset class="email">
<input type="email" placeholder="email" />
</fieldset>
<fieldset class="password">
<input type="password" placeholder="password" />
</fieldset>
<button type="submit" class="btn">sign up</button>
</form>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
height: 100%;
font-family: Open Sans;
}
body {
background: hsl(86, 85%, 95%);
}
/*--------------------
Buttons
--------------------*/
.btn {
display: block;
background: hsl(86, 76%, 71%);
color: hsl(0, 0, 100);
text-decoration: none;
margin: 20px 0;
padding: 15px 15px;
border-radius: 5px;
position: relative;
&::after {
content: '';
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: all .2s ease-in-out;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Now UI Kit
sign up 2
Bootstrap 4.11 sign in form
Sign up form [Validations NOT ACHIEVED]

Questions / Comments: