<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="800px" height="600px" viewBox="0 0 800 600" enable-background="new 0 0 800 600" xml:space="preserve">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="174.7899" y1="186.34" x2="330.1259" y2="186.34" gradientTransform="matrix(0.8538 0.5206 -0.5206 0.8538 147.9521 -79.1468)">
	<stop  offset="0" style="stop-color:#FFC035"/>
	<stop  offset="0.221" style="stop-color:#F9A639"/>
	<stop  offset="1" style="stop-color:#E64F48"/>
</linearGradient>
<circle fill="url(#SVGID_1_)" cx="266.498" cy="211.378" r="77.668"/>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="290.551" y1="282.9592" x2="485.449" y2="282.9592">
	<stop  offset="0" style="stop-color:#FFA33A"/>
	<stop  offset="0.0992" style="stop-color:#E4A544"/>
	<stop  offset="0.9624" style="stop-color:#00B59C"/>
</linearGradient>
<circle fill="url(#SVGID_2_)" cx="388" cy="282.959" r="97.449"/>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="180.3469" y1="362.2723" x2="249.7487" y2="362.2723">
	<stop  offset="0" style="stop-color:#12B3D6"/>
	<stop  offset="1" style="stop-color:#7853A8"/>
</linearGradient>
<circle fill="url(#SVGID_3_)" cx="215.048" cy="362.272" r="34.701"/>
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="367.3469" y1="375.3673" x2="596.9388" y2="375.3673">
	<stop  offset="0" style="stop-color:#12B3D6"/>
	<stop  offset="1" style="stop-color:#7853A8"/>
</linearGradient>
<circle fill="url(#SVGID_4_)" cx="482.143" cy="375.367" r="114.796"/>
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="365.4405" y1="172.8044" x2="492.4478" y2="172.8044" gradientTransform="matrix(0.8954 0.4453 -0.4453 0.8954 127.9825 -160.7537)">
	<stop  offset="0" style="stop-color:#FFA33A"/>
	<stop  offset="1" style="stop-color:#DF3D8E"/>
</linearGradient>
<circle fill="url(#SVGID_5_)" cx="435.095" cy="184.986" r="63.504"/>
</svg>


<div class="container">
  <h2>login</h2>
  <form>
    <input type="text" class="email" placeholder="email">
    <br/>
    <input type="text" class="pwd" placeholder="password">
  </form>
  <a href="#" class="link">
    forgot your password ?
  </a>
  <br/>
  <button class="register">
    <span>register</span>
  </button>
  <button class="signin">
    <span>sign in</span>
  </button>
  <h3>your registration is complete !    </h3>
  <h3>your sign in is complete !</h3>
  <div class="reg"></div>
  <div class="sig"></div>

 
 
</div>
*{
  margin:0;
  padding:0;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

body{
  font-family: 'Open Sans', sans-serif;
  background:#e2e2e2;
}

svg{
  position:fixed;
  top:10px;
  left:180px;
}

.container{
  position:relative;
  top:200px;
  left:35%;
  display:block;
  margin-bottom:80px;
  width:500px;
  height:360px;
  background:#fff;
  border-radius:5px;
  overflow:hidden;
  z-index:1;
}

h2{
  padding:40px;
  font-weight:lighter;
  text-transform:uppercase;
  color:#414141;
}

input{
  display:block;
  height:50px;
  width:90%;
  margin:0 auto;
  border:none;
  &::placeholder{
    -webkit-transform:translateY(0px);
      transform:translateY(0px);
    -webkit-transition:.5s;
      transition:.5s;
  }
  &:hover,
  &:focus,
  &:active:focus{
    color:#ff5722;
    outline:none;
    border-bottom:1px solid #ff5722;
    &::placeholder{
      color:#ff5722;
      position:relative;
      -webkit-transform:translateY(-20px);
      transform:translateY(-20px);
      
    }
  }
}



.email,
.pwd{
  position:relative;
  z-index:1;
  border-bottom:1px solid rgba(0,0,0,.1);
  padding-left:20px;
  font-family: 'Open Sans', sans-serif;
  text-transform:uppercase;
  color:#858585;
  font-weight:lighter;
  -webkit-transition:.5s;
  transition:.5s;
}



.link{
  text-decoration:none;
  display:inline-block;
  margin:27px 28%;
  text-transform:uppercase;
  color:#858585;
  font-weight:lighter;
  -webkit-transition:.5s;
  transition:.5s;
}



button{
  cursor:pointer; 
  display:inline-block;
  float:left;
  width:250px;
  height:60px;
  margin-top:-10px;
  border:none;
  font-family: 'Open Sans', sans-serif;
  text-transform:uppercase;
  color:#fff;
  -webkit-transition:.5s;
  transition:.5s;
  &:nth-of-type(1){
    background:#673ab7;
  }
  &:nth-of-type(2){
    background:#ff5722;
  }
  span{
    position:absolute;
    display:block;
    margin:-10px 20%;
    -webkit-transform:translateX(0);
    transform:translateX(0);
    -webkit-transition:.5s;
    transition:.5s;
  }
  &:hover{
    span{
      -webkit-transform:translateX(30px);
      transform:translateX(30px);
      }
   }
}

.reg{
    position:absolute;
    top:0;
    left:0;
    -webkit-transform:translateY(-100%) scale(1);
    transform:translateY(-100%) scale(1);
    display:block;
    width:20px;
    height:20px;
    border-radius:50px;
    background:#673ab7;
    z-index:5;
    -webkit-transition:.8s ease-in-out;
    transition:.8s ease-in-out;
  }



.sig{
   position:absolute;
   top:0;
   right:0;
   -webkit-transform:translateY(-100%) scale(1);
   transform:translateY(-100%) scale(1);
   display:block;
   width:20px;
   height:20px;
   display:block;
   background:#ff5722;
   z-index:5;
   -webkit-transition:.8s ease-in-out;
    transition:.8s ease-in-out;
}

h3{
  position:absolute;
  top:-100%;
  left:20%; 
  text-transform:uppercase;
  font-weight:bolder;
  color:rgba(255,255,255,.3);
  -webkit-transition:.3s ease-in-out 1.2s;
  transition:.3s ease-in-out 1.2s;
}


View Compiled
$(document).ready(() => {
  /*------- button with class register -------*/
  let reg_btn:string = $('.container .register')
  
  /*------- button with class sign in --------*/
  let sig_btn:string = $('.container .signin')
  
  /*------- back button ----------------------*/
  let back_btn:string = $('.container .back')
  

  

  reg_btn.click(function(e){
    e.preventDefault()
    $(this).siblings('.reg').css({
      'transform':'translateY(40%) scale(5)',
      'border-radius':'0',
      'width':'100%',
      'height':'100%'
    }).end();
    
  
    reg_btn.siblings('.container h3:nth-of-type(1)').css({
      'top':'40%',
      'z-index':'8',
    }).end().end();   
  });
  
   sig_btn.on('click',function(e){
    e.preventDefault();
    $(this).siblings('.sig').css({
      'transform':'translateY(40%) scale(5)',
      'border-radius':'0',
      'width':'100%',
      'height':'100%'
    }).end();
     
 
    sig_btn.siblings('.container h3:nth-of-type(2)').css({
      'top':'40%',
      'z-index':'8',
    }).end().end(); 
    
  });
});
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js