Skip to content Skip to sidebar Skip to footer
Home / CSS / HTML / JavaScript / login

Download Template Login Form Website

Post a Comment
Download Template Login Form Website

Login bagaikan sebuah pintu dalam sebuah webiste, jika kita membuka dengan kunci yang salah maka pintu tersebut tidak bisa dibuka. Pintu dalam sebuah website juga berperan sangat penting pada saat pengguna baru ingin memasuki website kita, jadi tampilan dalam website harus menarik agar pengunjung bisa nyaman dengan rumah kita pada saat pertama login.
Di sini ada beberapa source kode login html yang bisa kalian gunakan untuk menghias pintu website kalian.

1. Calm breeze login screen
Source kodenya
HTML
<div class="wrapper">
<div class="container">
<h1>Welcome</h1>
<form class="form">
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
<button type="submit" id="login-button">Login</button>
</form>
</div>
<ul class="bg-bubbles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
 CSS
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300);
@prim: #53e3a6;
*{
box-sizing: border-box;
margin: 0;
padding: 0;
font-weight: 300;
}
body{
font-family: 'Source Sans Pro', sans-serif;
color: white;
font-weight: 300;
::-webkit-input-placeholder { /* WebKit browsers */
font-family: 'Source Sans Pro', sans-serif;
color:    white;
font-weight: 300;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
font-family: 'Source Sans Pro', sans-serif;
color:    white;
opacity:  1;
font-weight: 300;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
font-family: 'Source Sans Pro', sans-serif;
color:    white;
opacity:  1;
font-weight: 300;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
font-family: 'Source Sans Pro', sans-serif;
color:    white;
font-weight: 300;
}
}
.wrapper{
background: #50a3a2;
background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
background: -moz-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
background: -o-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 400px;
margin-top: -200px;
overflow: hidden;
&.form-success{
.container{
h1{
transform: translateY(85px);
}
}
}
}
.container{
max-width: 600px;
margin: 0 auto;
padding: 80px 0;
height: 400px;
text-align: center;
h1{
font-size: 40px;
transition-duration: 1s;
transition-timing-function: ease-in-put;
font-weight: 200;
}
}
form{
padding: 20px 0;
position: relative;
z-index: 2;
input{
display: block;
appearance: none;
outline: 0;
border: 1px solid fade(white, 40%);
background-color: fade(white, 20%);
width: 250px;
border-radius: 3px;
padding: 10px 15px;
margin: 0 auto 10px auto;
display: block;
text-align: center;
font-size: 18px;
color: white;
transition-duration: 0.25s;
font-weight: 300;
&:hover{
background-color: fade(white, 40%);
}
&:focus{
background-color: white;
width: 300px;
color: @prim;
}
}
button{
appearance: none;
outline: 0;
background-color: white;
border: 0;
padding: 10px 15px;
color: @prim;
border-radius: 3px;
width: 250px;
cursor: pointer;
font-size: 18px;
transition-duration: 0.25s;
&:hover{
background-color: rgb(245, 247, 249);
}
}
}
.bg-bubbles{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
li{
position: absolute;
list-style: none;
display: block;
width: 40px;
height: 40px;
background-color: fade(white, 15%);
bottom: -160px;
-webkit-animation: square 25s infinite;
animation:         square 25s infinite;
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
&:nth-child(1){
left: 10%;
}
&:nth-child(2){
left: 20%;
width: 80px;
height: 80px;
animation-delay: 2s;
animation-duration: 17s;
}
&:nth-child(3){
left: 25%;
animation-delay: 4s;
}
&:nth-child(4){
left: 40%;
width: 60px;
height: 60px;
animation-duration: 22s;
background-color: fade(white, 25%);
}
&:nth-child(5){
left: 70%;
}
&:nth-child(6){
left: 80%;
width: 120px;
height: 120px;
animation-delay: 3s;
background-color: fade(white, 20%);
}
&:nth-child(7){
left: 32%;
width: 160px;
height: 160px;
animation-delay: 7s;
}
&:nth-child(8){
left: 55%;
width: 20px;
height: 20px;
animation-delay: 15s;
animation-duration: 40s;
}
&:nth-child(9){
left: 25%;
width: 10px;
height: 10px;
animation-delay: 2s;
animation-duration: 40s;
background-color: fade(white, 30%);
}
&:nth-child(10){
left: 90%;
width: 160px;
height: 160px;
animation-delay: 11s;
}
}
}
@-webkit-keyframes square {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-700px) rotate(600deg); }
}
@keyframes square {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-700px) rotate(600deg); }
}
 JS
 $("#login-button").click(function(event){
event.preventDefault();

$('form').fadeOut(500);
$('.wrapper').addClass('form-success');
});
 Output dari program tersebut:
Download Template Login Form Website

Lebih jelasnya : https://codepen.io/Lewitje/pen/BNNJjo

2. Animated login form
source kode
HTML
<div class="wrapper">
  <form class="login">
    <p class="title">Log in</p>
    <input type="text" placeholder="Username" autofocus/>
    <i class="fa fa-user"></i>
    <input type="password" placeholder="Password" />
    <i class="fa fa-key"></i>
    <a href="#">Forgot your password?</a>
    <button>
      <i class="spinner"></i>
      <span class="state">Log in</span>
    </button>
  </form>
  <footer><a target="blank" href="http://boudra.me/">boudra.me</a></footer>
  </p>
</div>
 CSS
$primary: #2196F3;
body {
  font-family: "Open Sans", sans-serif;
  height: 100vh;
  background: url("https://i.imgur.com/HgflTDf.jpg") 50% fixed;
  background-size: cover;
}
@keyframes spinner {
  0% { transform: rotateZ(0deg); }
  100% { transform: rotateZ(359deg); }
}
* {
  box-sizing: border-box;
}
.wrapper {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  min-height: 100%;
  padding: 20px;
  background: rgba(darken($primary,40%), 0.85);
}

.login {
 
  border-radius: 2px 2px 5px 5px;
  padding: 10px 20px 20px 20px;
  width: 90%;
  max-width: 320px;
  background: #ffffff;
  position: relative;
  padding-bottom: 80px;
  box-shadow: 0px 1px 5px rgba(0,0,0,0.3);
 
  &.loading {
    button {
      max-height: 100%;
      padding-top: 50px;
      .spinner {
        opacity: 1;
        top: 40%;
      }
    } 
  }
 
  &.ok {
    button {
      background-color: #8bc34a;
      .spinner{
        border-radius: 0;
        border-top-color: transparent;
        border-right-color: transparent;
        height: 20px;
        animation: none;
        transform: rotateZ(-45deg);
      }
    }
  }
 
  input {
    display: block;
    padding: 15px 10px;
    margin-bottom: 10px;
    width: 100%;
    border: 1px solid #ddd;
    transition: border-width 0.2s ease;
    border-radius: 2px;
    color: #ccc;
   
    &+ i.fa {
        color: #fff;
      font-size: 1em;
      position: absolute;
      margin-top: -47px;
      opacity: 0;
      left: 0;
      transition: all 0.1s ease-in;
    }
   
    &:focus {
      &+ i.fa {
        opacity: 1;
        left: 30px;
      transition: all 0.25s ease-out;
      }
      outline: none;
      color: #444;
      border-color: $primary;
      border-left-width: 35px;
    }
   
  }
 
  a {
   font-size: 0.8em; 
    color: $primary;
    text-decoration: none;
  }
 
  .title {
    color: #444;
    font-size: 1.2em;
    font-weight: bold;
    margin: 10px 0 30px 0;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
  }
 
  button {
    width: 100%;
    height: 100%;
    padding: 10px 10px;
    background: $primary;
    color: #fff;
    display: block;
    border: none;
    margin-top: 20px;
    position: absolute;
    left: 0;
    bottom: 0;
    max-height: 60px;
    border: 0px solid rgba(0,0,0,0.1);
  border-radius: 0 0 2px 2px;
    transform: rotateZ(0deg);
   
    transition: all 0.1s ease-out;
      border-bottom-width: 7px;
   
    .spinner {
      display: block;
      width: 40px;
      height: 40px;
      position: absolute;
      border: 4px solid #ffffff;
      border-top-color: rgba(255,255,255,0.3);
      border-radius: 100%;
      left: 50%;
      top: 0;
      opacity: 0;
      margin-left: -20px;
      margin-top: -20px;
      animation: spinner 0.6s infinite linear;
      transition: top 0.3s 0.3s ease,
                opacity 0.3s 0.3s ease,
                border-radius 0.3s ease;
      box-shadow: 0px 1px 0px rgba(0,0,0,0.2);
    }
   
  }
 
    &:not(.loading) button:hover {
      box-shadow: 0px 1px 3px $primary;
    }
    &:not(.loading) button:focus {
      border-bottom-width: 4px;
    }
   
 
}
footer {
  display: block;
  padding-top: 50px;
  text-align: center;
  color: #ddd;
  font-weight: normal;
  text-shadow: 0px -1px 0px rgba(0,0,0,0.2);
  font-size: 0.8em;
  a, a:link {
    color: #fff;
    text-decoration: none;
  }
}
 JS
var working = false;
$('.login').on('submit', function(e) {
  e.preventDefault();
  if (working) return;
  working = true;
  var $this = $(this),
    $state = $this.find('button > .state');
  $this.addClass('loading');
  $state.html('Authenticating');
  setTimeout(function() {
    $this.addClass('ok');
    $state.html('Welcome back!');
    setTimeout(function() {
      $state.html('Log in');
      $this.removeClass('ok loading');
      working = false;
    }, 4000);
  }, 3000);
});
Output dari program tersebut:
Download Template Login Form Website

Lebih Jelasnya : https://codepen.io/boudra/pen/YXzLBN

Post a Comment for "Download Template Login Form Website"