Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Login Form ( Only CSS )
.container
input(type="radio" name="tab" id="signin" checked)
input(type="radio" name="tab" id="register")
.pages
.page
.input
.title #[i.material-icons account_box] USERNAME
input.text(type="text" placeholder="")
.input
.title #[i.material-icons lock] PASSWORD
input.text(type="password" placeholder="")
.input
input(type="submit" value="ENTER")
.page.signup
.input
.title #[i.material-icons person] NAME
input.text(type="text" placeholder="")
.input
.title #[i.material-icons markunread_mailbox] EMAIL
input.text(type="password" placeholder="")
.input
input(type="submit" value="SIGN ME UP!")
.tabs
label.tab(for="signin") #[.text Sign In]
label.tab(for="register") #[.text Register]
// Demo or didn't happen
var signin = document.querySelector('#signin')
var register = document.querySelector('#register')
setTimeout(function(){ register.checked = true}, 1000)
setTimeout(function(){ signin.checked = true}, 2000)
html, body{
padding:0px;
margin:0px;
background:#F8F2ED;
font-family: 'Raleway', sans-serif;
color:#FFF;
height:100%;
}
.container{
min-height:300px;
max-width:250px;
margin:40px auto;
background:#FFF;
border-radius:2px;
box-shadow:0px 2px 3px rgba(0, 0, 0, 0.2);
display:flex;
flex-direction:column;
overflow:hidden;
animation: hi 0.5s;
-webkit-transform: translateZ(0px);
*{
box-sizing:border-box;
}
}
.pages{
flex:1;
white-space:nowrap;
position:relative;
transition:all 0.4s;
display:flex;
.page{
min-width:100%;
padding:20px 15px;
padding-top:0px;
background:linear-gradient(to left, #955DFF, #6FAAFF);
&:nth-of-type(1){
.input { transform:translateX(-100%) scale(0.5); }
}
&:nth-of-type(2){
.input { transform:translateX(100%) scale(0.5); }
}
.input{
transition:all 1s;
opacity:0;
transition-delay:0s;
}
&.signup{
background:linear-gradient(to left, #6FAAFF, #955DFF);
}
.title{
margin-bottom:10px;
font-size:14px;
position:relative;
line-height:14px;
i{
vertical-align:text-bottom;
font-size:19px;
}
}
.input{
margin-top:20px;
}
input.text{
background:#F6F7F9;
border:none;
border-radius:4px;
width:100%;
height:40px;
line-height:40px;
padding:0px 10px;
color:rgba(0, 0, 0, 0.5);
outline:none;
}
input[type=submit]{
background:rgba(0, 0, 0, 0.5);
color:#F6F7F9;
height:40px;
line-height:40px;
width:100%;
border:none;
border-radius:4px;
font-weight:600;
}
}
}
.tabs{
max-height:50px;
height:50px;
display:flex;
background:#FFF;
.tab{
flex:1;
color:#5D708A;
text-align:center;
line-height:50px;
transition:all 0.2s;
.text{
font-size:14px;
transform:scale(1);
transition:all 0.2s;
}
}
}
input[type=radio]{ display:none; }
@for $i from 0 through 1{
input[type=radio]:nth-of-type(#{$i + 1}):checked {
~ .tabs .tab:nth-of-type(#{$i + 1}){
box-shadow:inset (6 * $i) + -3px 2px 5px rgba(0, 0, 0, 0.25);
color:#3F4C7F;
.text{ transform:scale(0.9); }
}
~ .pages{
transform:translateX(-100% * $i);
.page:nth-of-type(#{$i + 1}){
.input {
opacity:1;
transform:translateX(0%);
transition:all 0.5s;
@for $i from 1 through 5{
&:nth-child(#{$i}) {
transition-delay:0.2s*$i
}
}
}
}
}
}
}
@keyframes hi{
from { transform: translateY(50%) scale(0, 0); opacity:0; }
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment