Sign In/Up Form Transitions

HAML
%form %input#signin{:type => "radio", :name => "action", :value => "signin", :checked => true} %label{:for => "signin"} Sign in %input#signup{:type => "radio", :name => "action", :value => "signup"} %label{:for => "signup"} Sign up %input#reset{:type => "radio", :name => "action", :value => "reset"} %label{:for => "reset"} Reset #wrapper #arrow %input#email{:placeholder => "Email", :type => "text"} %input#pass{:placeholder => "Password", :type => "password"} %input#repass{:placeholder => "Repeat password", :type => "password"} %button{:type => "submit"} %span Reset password %br Sign in %br Sign up #hint Click on the tabs
CSS
@import url(https://fonts.googleapis.com/css?family=Raleway:700,800); html, body { margin: 0; } :focus { outline: none; } ::-webkit-input-placeholder { color: #DEDFDF; } ::-moz-placeholder { color: #DEDFDF; } :-moz-placeholder { color: #DEDFDF; } ::-ms-input-placeholder { color: #DEDFDF; } body { background: #6ED0F6; color: #fff; font-family: 'Raleway', sans-serif; -webkit-font-smoothing: antialiased; } #wrapper, label, #arrow, button span { transition: all .5s cubic-bezier(.6,0,.4,1); } #wrapper { overflow: hidden; } #signin:checked ~ #wrapper { height: 178px; } #signin:checked ~ #wrapper #arrow { left: 32px; } #signin:checked ~ button span { transform: translate3d(0,-72px,0); } #signup:checked ~ #wrapper { height: 262px; } #signup:checked ~ #wrapper #arrow { left: 137px; } #signup:checked ~ button span { transform: translate3d(0,-144px,0); } #reset:checked ~ #wrapper { height: 94px; } #reset:checked ~ #wrapper #arrow { left: 404px; } #reset:checked ~ button span { transform: translate3d(0,0,0); } form { width: 450px; height: 370px; margin: -185px -225px; position: absolute; left: 50%; top: 50%; } input[type=radio] { display: none; } label { cursor: pointer; display: inline-block; font-size: 22px; font-weight: 800; opacity: .5; margin-bottom: 30px; text-transform: uppercase; } label:hover { transition: all .3s cubic-bezier(.6,0,.4,1); opacity: 1; } label[for="signin"] { margin-right: 20px; } label[for="reset"] { float: right; } input[type=radio]:checked + label { opacity: 1; } input[type=text], input[type=password] { background: #fff; border: none; border-radius: 8px; font-size: 27px; font-family: 'Raleway', sans-serif; height: 72px; width: 99.5%; margin-bottom: 10px; opacity: 1; text-indent: 20px; transition: all .2s ease-in-out; } button { background: #079BCF; border: none; border-radius: 8px; color: #fff; cursor: pointer; font-family: 'Raleway', sans-serif; font-size: 27px; height: 72px; width: 100%; margin-bottom: 10px; overflow: hidden; transition: all .3s cubic-bezier(.6,0,.4,1); } button span { display: block; line-height: 72px; position: relative; top: -2px; transform: translate3d(0,0,0); } button:hover { background: #007BA5; } #arrow { height: 0; width: 0; border-bottom: 10px solid #fff; border-left: 10px solid transparent; border-right: 10px solid transparent; position: relative; left: 32px; } #hint { width: 100%; text-align: center; position: absolute; bottom: 20px; }
JAVASCRIPT
Expand for more options Login