LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Login



Sign up



CSS
* {
  font-family:Helvetica;
  font-weight:100
}

body{
  background:url("https://subtlepatterns.com/patterns/dark_fish_skin.png");
  color:white;
}
#spacer{
  height:100px;
}
header{
  height:50px;
}

h1{
  vertical-align:top;
  line-height:50px;
}
.box{
  border-radius:25px;
  background:#888;
  padding:5px 0px;
  padding-left:16px;
  width:28px;
  height:35px;
  margin:auto;
  overflow:hidden;
  white-space: nowrap;
  transition:all .2s ease;
  border:3px solid #8BF;
}
.text{
  margin-left:15px;
  margin-top:3px;
  background:#37D;
  color:white;
  border:none;
  outline:transparent;
  padding:5px;
  font-size:12pt;
  
}

#form-container, #icon {
  display:inline-block;
  vertical-align:top;
}
#icon {
  margin-top:10px;
}

.showbox {
  background:#39F;
  width:305px;
  transition-delay:0s;
}

.showpass {
  height:88px;
}

.icon {
  margin-left:-25px;
  color:#15B;
}
.icon:hover {
  margin-left:-25px;
  color:#69F;
}
JS
///////////// LOGIN ////////////////

$("#loginbox").mouseenter( function () {
   $("#loginbox").addClass("showbox");
});

$("#loginbox").mouseleave( function () {
  
  if (!$("#logintext,#loginpass").is(":focus")) {
   $("#loginbox").removeClass("showbox showpass");
  }
  
});

//$("#logintext,#loginpass").focusout( function () {
//   $("#loginbox").removeClass("showbox showpass");
//});

$("#logintext, #loginpass").focusin( function () {
   $("#loginbox").addClass("showbox showpass");
});

///////////// SIGNUP ////////////////

$("#box").mouseenter( function () {
   $("#box").addClass("showbox");
});

$("#box").mouseleave( function () {
  
  if (!$("#signuptext, #signuppass").is(":focus")) {
   $("#box").removeClass("showbox showpass");
   }
  
});

//$("#signuptext, #signuppass").focusout( function () {
//   $("#box").removeClass("showbox showpass");
//});


$("#signuptext, #signuppass").focusin( function () {
   $("#box").addClass("showbox showpass");
});

$("i.icon").mousedown(function() {
  var id = $(this).attr("id");
   $("input#"+id).val("");
});
Host Instantly Drag and Drop Website Builder

 

Description

This app demonstrates a simple login/signup form that expands to reveal a text input after hovering over the button.
Term
Wed, 11/29/2017 - 11:21

Related Codes

Pen ID
Pen ID
Pen ID