Membuat Form Login Seperti Google Dengan HTML & CSS3

Membuat Form Login Seperti Google Dengan HTML & CSS3

Form login seperti google – tentu anda sudah tidak asing lagi dengan akun google, bahkan jika anda adalah seorang pecandu smartphone android, sebuah akun google adalah kebutuhan wajib.




Nah untuk kali ini saya akan membagikan sebuah tutorial membuat form login yang mirip dengan google, tentu anda sudah tahukan tampilan form login google itu sangat clean, nggak neko-neko dan mudah digunakan.

Dari itulah akhirnya saya sedikit termotivasi membuat form dengan tampilan yang mirip.

Walaupun tidak sepenuhnya mirip tapi saya berusaha membuatnya semirip mungkin, nah seperti inilah hasilnya:

form login seperti google

Untuk anda yang penarasan bagimana caranya membuat berikut ini saya bagikan tutorialnya:

Baca : Membuat Form Signup/Pendaftaran Keren Dengan CSS3 | Download Form Login Keren Dengan HTML dan CSS3

Cara Membuat Form Login Seperti Google Dengan HTML & CSS3

Anda hanya perlu mengikuti beberapa langkah mudah, diantaranya :

  1. Buat folder baru
    Langkah pertama buatlah sebuah folder baru, folder ini akan kita gunakan untuk meletakkan file-file pendukung seperti index.html, style.css dan gambar icon user.
  2. Buat file index.html
    Buatlah sebuah file index.html di dalam folder yang telah anda buat tadi, kemudian ketikkan kode berikut:
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Google Form</title>

<link rel="stylesheet" href="css/style.css">

</head>

<body>

<div class="container">

<table class="margin">

<h3 class="teks">Masuk ke akun Anda</h3>

<form action="">

<tr>

<td><img src="google.png" width="100" alt=""></td>

</tr>

<tr>

<td>

<input type="email" placeholder="Email">

<input type="password" placeholder="Password">

</td>

</tr>

<tr>

<td>

<input class="rata" type="submit" value="Masuk">

</td>

</tr>

</form>

</table>

<small>

<div class="menu2 rata">

<div class="kiri">

<a href="">Indonesia</a><span class="arah arah-bawah"></span>

</div>

<div class="kanan">

<ul>

<li>Bantuan</li>

<li>Privasi</li>

<li>Persyaratan</li>

</ul>

</div>

</div>

</small>

</div>

</body>

</html>
  1. Buat file style.css
    Langkah kedua buatlah sebuah file style.css dan letakkan di dalam folder yang sama dengan file index.html, lalu masukkan kode berikut:
*{padding: 0; margin: 0;}

body{

    background: #FBFBFC;

    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

}

.container{

    margin-top: 50px;

}

table{

    margin: auto;

    padding: 40px 40px 80px 40px;

    background: #fff;

    box-shadow: 0 5px 5px -5px #333;

    margin-top: 20px;

}

.margin{

    width: 360px;

    background: whitesmoke;

}

.rata{

    width: 280px;

}

.teks{

    margin-bottom: 30px;

    font-weight: 600;

    text-transform: capitalize;

    letter-spacing: 2px;

    color: #666;    

    text-align: center;

}

input[type=email],input[type=password]{

    border:none;

    border: 0.1px solid #E2E2E2;

    height: 2.7em;

    padding-left: 10px;

    color:  #666;

    font-size: 17px;

    margin-bottom: 0.1px;

    font-weight: bold;

    width: 270px;

}

input[type=submit]{

    background: #4285F4;

    margin-top: 7px;

    padding: 10px 20px;

    color: #fff;

    border: none;

    border-radius: 3px;

    text-transform: capitalize;

    letter-spacing: 1px;    

    font-weight: 300;

}

img{

    width: 132px;

    height: 106px;

    margin: 0px 0px 20px 75px;

}

input[type=submit]:hover{

    cursor: pointer;

    background: linear-gradient(to bottom,#4285F4,rgb(51, 120, 209))!important;

    transition: background 0.3s;

}

.menu2{

    margin: auto;

    overflow: hidden;

    margin-top: 20px;

    color: #666;

}

.kiri{

    float: left;

}

.kiri a{

    text-decoration: none;

    color:#212121;

}

.kanan{

    float: right;

}

ul{

    list-style: none;

}

ul li{

    float: left;

    margin-left: 10px;
}

.arah{

    margin:6px;

    float: right;

    cursor: pointer;

}

.arah-bawah{

    width: 0;

    height: 0;

    border-left: 5px solid transparent;

    border-right: 5px solid transparent;    

    border-top: 5px solid #333;

}


Selesai, selanjutnya anda bisa mencari gambar icon supaya tampilannya bisa lebih mirip login google.

Namun jika anda tidak ingin terllau repot mungkin anda bisa langsung mendownload souce code yang akan saya bagikan, didalamnya sudah terdapat gambar pendukungnya.

Download Source Code


Informasi

Nama : Form Glogin CSS3

Ukuran : 10KB

Format : rar

Harga : Gratis

Download


 

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *