<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> </div> </div>

*, *::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; box-shadow: inset 0 3px 0 hsla(0, 0, 0, 0), 0 3px 3px hsla(0, 0, 0, .2); border-radius: 5px; } &:hover::after { background: hsla(0, 0, 0, 0.1); box-shadow: inset 0 3px 0 hsla(0, 0, 0, 0.2); } } .btn-social { padding-left: 64px; position: relative; z-index: 1; .fa { position: absolute; top: 0; left: 0; z-index: 1; width: 50px; height: 100%; text-align: center; background: hsla(0, 0, 0, 0.1); line-height: 3.2; border-radius: 5px 0 0 5px; } } .btn-facebook { background-color: hsl(221, 44%, 41%); } .btn-twitter { background-color: hsl(206, 82%, 63%); } .btn-google { background-color: hsl(7, 71%, 55%); } .btn-linkedin { background-color: hsl(196, 100%, 43%); } /*-------------------- Form --------------------*/ .form { fieldset { border: none; padding: 0; margin: 20px 0; position: relative; input { width: 100%; height: 48px; color: hsl(0, 0, 20); padding: 15px 40px 15px 15px; border-radius: 5px; font-size: 14px; outline: none!important; border: 1px solid hsla(0, 0, 0, 0.3); box-shadow: inset 0 1px 4px hsla(0, 0, 0, 0.2); vertical-align: top; } } button { width: 100%; outline: none!important; background: linear-gradient(-5deg, hsl(86, 61%, 44%), hsl(86, 65%, 54%)); border: none; text-transform: uppercase; font-weight: bold; box-shadow: 0 3px 0px hsla(86, 21%, 44%, 0.2); text-shadow: 0 2px 3px hsla(0, 0, 0, 0.2); } } /*-------------------- Signup --------------------*/ .signup { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; width: 800px; background: hsl(0, 0, 100); border-radius: 10px; box-shadow: 0 3px 25px hsla(0, 0, 0, 0.2); overflow: hidden; display: flex; } .signup-connect, .signup-classic { width: 50%; padding: 30px 50px; } .signup-connect { background: linear-gradient(134deg, hsl(44, 96%, 65%), hsl(34, 95%, 45%)); color: hsl(0, 0, 100); h1 { font-size: 30px; margin-top: 10px; margin-bottom: 40px; text-shadow: 0 2px 3px hsla(0, 0, 0, 0.1); } } .signup-classic { h2 { font-size: 16px; font-weight: normal; margin-top: 23px; margin-bottom: 43px; text-shadow: 0 2px 3px hsla(0, 0, 0, 0.1); } fieldset::after { content: '\f007'; font-family: FontAwesome; position: absolute; right: 15px; top: 17px; z-index: 2; width: 20px; color: hsla(0, 0, 0, .2); text-align: center; } fieldset.email::after { content: '\f0e0'; } fieldset.password::after { content: '\f023'; } }