LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Material Design Login Screen

Username
Password
CSS
body{
  background:#4a4a4a;
  text-align:center;
  font-family:Helvetica, Arial, sans-serif;
  font-size:24px;
  color: #d1d1d1;
}


input{
	height:35px;
  width:100%;
  font-size:24px;
}

button{
  position: relative;
  border: none;
  outline:none;
  cursor: pointer;
  background: #89669b;
  color: white;
  padding: 18px 60px;
  border-radius: 2px;
  font-size: 22px;
  
  transition: .5s all ease;
  -webkit-box-shadow: 0px 5px 8px #1d1d1d;
}

button:hover{
  -webkit-box-shadow: 0px 10px 18px #333;
}



.wrapper{
	position:relative;
  width:40%;
  margin: 10% auto;
}

/*-------- End Basic Setup ------*/

.anim-input{
  position:relative;
  background:#fff;
  height:35px;
  margin: 10px auto;
  
  border-radius: 4px;
  -webkit-box-shadow: inset 0px 1px 3px #1d1d1d;
}

.anim-input .label{
  position:absolute;
  width:100%;
  z-index:1;
  
  bottom:5px;
  text-align:center;

  cursor: text;
  transition: .4s all ease;
}

.anim-input input{
  position:absolute;
  top:0;
  left:0;
  z-index:2;
  border:none;
  outline:none;
  background:none;
  
  text-align:center;
}

.active-input-anim .label{
  opacity:0;
}

/* Css for ripples */

.ripple{
  overflow:hidden;
}

.ripple-effect{
  position: absolute;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  background: white;

    
  -webkit-animation: ripple-animation 2s;
}


@-webkit-keyframes ripple-animation {
    from {
      -webkit-transform: scale(1);
      opacity: 0.4;
    }
    to {
      -webkit-transform: scale(100);
      opacity: 0;
    }
}
JS
$(function(){
  
  $(".anim-input input").each(function(){
    
    $(this).on('focus', function() {
      $(this).parent().addClass('active-input-anim');
    });

    $(this).on('blur', function() {
      if ($(this).val().length == 0) {
        $(this).parent().removeClass('active-input-anim');
      }
    });
  });
  
  // Code for Ripple Effect
  
  $('.ripple').on('click', function (event) {
      event.preventDefault();
      
      var $div = $('
'), btnOffset = $(this).offset(), xPos = event.pageX - btnOffset.left, yPos = event.pageY - btnOffset.top; $div.addClass('ripple-effect'); var $ripple = $(".ripple-effect"); $ripple.css("height", $(this).height()); $ripple.css("width", $(this).height()); $div .css({ top: yPos - ($ripple.height()/2), left: xPos - ($ripple.width()/2), background: $(this).data("ripple-color") }) .appendTo($(this)); window.setTimeout(function(){ $div.remove(); }, 2000); }); })
Host Instantly Drag and Drop Website Builder

 

Description

A quick concept using material design concepts for a login screen. The class "ripple" sets the ripple effect and the property "data-ripple-color" changes the default white to a different ripple color.
Term
Wed, 11/29/2017 - 11:22

Related Codes

Pen ID
Pen ID
Pen ID