Cara Membuat Form Login Dengan CSS3

السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ

pada sehat semua kan ? hehe ,kali ini saya mau berbagi Cara Membuat Form Login Dengan CSS3

form login ini cukup simple namun indah bila di pandang mata heheh ^_^

tidak usah berlama lagi ya, silahkan simak tutorial berikut ini .

1. seperti biasanya, silahkan buat file html bernama index.html dan ketikkan script berikut ini .

 <!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>Form Login With CSS</title>
 <link rel="stylesheet" type="text/css" href="style.css"> 
</head>
<body>
<form>
  <h1>Silahkan Login</h1>
  <input type="text" placeholder="Username"/>
  <input type="password" placeholder="Password"/>
  <button>Login</button>
</form>
</body>
</html>

2. buatlah file css bernaya style.css dan ketikkan script berikut .

 * {
  margin: 0;
  padding: 0;
  border: none;
  list-style: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  font: 15px/1.25 'Alef';
  color: #111111;

}
form {
  margin: 70px auto;
  background: #2a3644;
  width: 347px;
  text-align: center;
  padding: 40px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
 -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
 box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}
form > h1 {
  color: #f4f4f4;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.7);
  font-weight: 400;
  margin-bottom: 20px;
  
}
input {
  background: rgba(0, 0, 0, 0.2);
  color: #fff;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3);
  display: block;
  width: 269px;
  padding: 15px;
  margin-bottom: 10px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
  border-radius: 6px;
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
  outline: none;
}
input:focus {
  background: rgba(0, 0, 0, 0.1);
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}
::-webkit-input-placeholder {
  color: rgba(225, 225, 225, 0.4);
}
:-moz-placeholder {
  color: rgba(225, 225, 225, 0.4);
}
::-moz-placeholder {
  color: rgba(225, 225, 225, 0.4);
}
:-ms-input-placeholder {
  color: rgba(225, 225, 225, 0.4);
}
button {
  position: relative;
  display: block;
  margin-top: 15px;
  margin-bottom: 15px;
  padding: 17px;
  width: 270px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
  border-radius: 6px;
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
  font-size: 1.2em;
  background: #f26964;
  color: #f4f4f4;
  box-shadow: 0px 3px 0px #ab4b47;
  cursor: pointer;
}
button:active {
  top: 3px;
  box-shadow: none;
}

akhirnya jadi juga, gimana ? simple bukan, hehe
mohon maaf jika tidak ada demonya .
silahkan kalian praktekan ya .
dan Semoga bermanfaat bagi Anda semua