"Loginbuttoneffect"
Bootstrap 3.3.0 Snippet by ashutosh123

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="login.css"> </head> <body background="http://orig11.deviantart.net/20eb/f/2015/030/6/f/_minflat__dark_material_design_wallpaper__4k__by_dakoder-d8fjqzu.jpg"> <div class="login-page"> <div class="form"> <form class="login-form"> <input type="text" placeholder="username"/> <input type="password" placeholder="password"/> <button><span>login</span></button> <p class="message">Not registered? <a href="#">Create an account</a></p> </form> </div> </div> </body> </html>
@import url('https://fonts.googleapis.com/css?family=Open+Sans'); .login-page { width: 360px; padding: 8% 0 0; margin: auto; } .form { position: relative; z-index: 1; background: #3d3d3d; max-width: 360px; margin: 0 auto 100px; padding: 45px; text-align: center; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24); } .form input { font-family: 'Open Sans', sans-serif; outline: 0; background: #f2f2f2; width: 100%; border: 0; margin: 0 0 15px; padding: 15px; box-sizing: border-box; font-size: 14px; } .form button { font-family: 'Open Sans', sans-serif; font-size: 18px; text-transform: uppercase; outline: 0; background: #e84c3d; width: 100%; border: 0; padding: 15px; color: #FFFFFF; width: 200px; transition: all 0.5s; cursor: pointer; margin: 5px; } button span { font-family: 'Open Sans', sans-serif; cursor: pointer; display: inline-block; position: relative; transition: 0.5s; } button span:after { content: '\00bb'; position: absolute; opacity: 0; top: 0; right: -20px; transition: 0.5s; } button:hover span { padding-right: 25px; } button:hover span:after { opacity: 1; right: 0; } .form .message { font-family: 'Open Sans', sans-serif; margin: 15px 0 0; color: #b3b3b3; font-size: 12px; } .form .message a { font-family: 'Open Sans', sans-serif; color: #e84c3d; text-decoration: none; } .form .register-form { display: none; } .container { position: relative; z-index: 1; max-width: 300px; margin: 0 auto; } .container:before, .container:after { content: ""; display: block; clear: both; } .container .info { margin: 50px auto; text-align: center; } .container .info h1 { margin: 0 0 15px; padding: 0; font-size: 36px; font-weight: 300; color: #1a1a1a; } .container .info span { color: #4d4d4d; font-size: 12px; } .container .info span a { color: #000000; text-decoration: none; } .container .info span .fa { color: #EF3B3A; } body { background-size: 100% }

Related: See More

BLK• Design System

Questions / Comments: