Di bawah ini kita akan mempelajari cara membuat formulir login media sosial dengan CSS.
Form Login Social Media
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> body { font-family: Arial, Helvetica, sans-serif; } * { box-sizing: border-box; } /* style untuk container */ .container { position: relative; border-radius: 5px; background-color: #f2f2f2; padding: 20px 0 30px 0; } /* style inputs dan link buttons */ input, .btn { width: 100%; padding: 12px; border: none; border-radius: 4px; margin: 5px 0; opacity: 0.85; display: inline-block; font-size: 17px; line-height: 20px; text-decoration: none; /* hapus garis bawah dari anchor */ } input:hover, .btn:hover { opacity: 1; } /* tambahkan warna yang sesuai untuk button fb, twitter dan google */ .fb { background-color: #3B5998; color: white; } .twitter { background-color: #55ACEE; color: white; } .google { background-color: #dd4b39; color: white; } /* style untuk submit button */ input[type=submit] { background-color: #4CAF50; color: white; cursor: pointer; } input[type=submit]:hover { background-color: #45a049; } /* layout dua kolom */ .col { float: left; width: 50%; margin: auto; padding: 0 50px; margin-top: 6px; } /* Hapus floats setelah kolom */ .row:after { content: ""; display: table; clear: both; } /* garis vertical */ .vl { position: absolute; left: 50%; transform: translate(-50%); border: 2px solid #ddd; height: 175px; } /* teks di dalam garis vertikal */ .vl-innertext { position: absolute; top: 50%; transform: translate(-50%, -50%); background-color: #f1f1f1; border: 1px solid #ccc; border-radius: 50%; padding: 8px 10px; } /* sembunyikan beberapa teks di layar sedang dan besar */ .hide-md-lg { display: none; } /* bottom container */ .bottom-container { text-align: center; background-color: #666; border-radius: 0px 0px 4px 4px; } /* Layout responsif - jika lebar layar kurang dari 650 piksel, buat dua kolom bertumpuk, bukan bersebelahan */ @media screen and (max-width: 650px) { .col { width: 100%; margin-top: 0; } /* sembunyikan garis vertical */ .vl { display: none; } /* tunjukkan teks tersembunyi di layar kecil */ .hide-md-lg { display: block; text-align: center; } } </style> </head> <body> <h2>Responsive Social Login Form</h2> <p>Ubah ukuran jendela browser untuk melihat efek responsif. Jika lebar layar kurang dari 650px, buat kedua kolom bertumpuk, bukan bersebelahan.</p> <div class="container"> <form action="/action_page.php"> <div class="row"> <h2 style="text-align:center">Login with Social Media or Manually</h2> <div class="vl"> <span class="vl-innertext">or</span> </div> <div class="col"> <a href="#" class="fb btn"> <i class="fa fa-facebook fa-fw"></i> Login with Facebook </a> <a href="#" class="twitter btn"> <i class="fa fa-twitter fa-fw"></i> Login with Twitter </a> <a href="#" class="google btn"><i class="fa fa-google fa-fw"> </i> Login with Google+ </a> </div> <div class="col"> <div class="hide-md-lg"> <p>Or sign in manually:</p> </div> <input type="text" name="username" placeholder="Username" required> <input type="password" name="password" placeholder="Password" required> <input type="submit" value="Login"> </div> </div> </form> </div> <div class="bottom-container"> <div class="row"> <div class="col"> <a href="#" style="color:white" class="btn">Sign up</a> </div> <div class="col"> <a href="#" style="color:white" class="btn">Forgot password?</a> </div> </div> </div> </body> </html>
Cara Membuat Form Login Social Media
Langkah 1) Tambahkan HTML:
Gunakan elemen <form>
untuk memproses input. Kemudian tambahkan masukan atau tautan media sosial untuk setiap bidang:
Contoh
<div class="container"> <form action="/action_page.php"> <div class="row"> <h2 style="text-align:center">Login with Social Media or Manually</h2> <div class="vl"> <span class="vl-innertext">or</span> </div> <div class="col"> <a href="#" class="fb btn"> <i class="fa fa-facebook fa-fw"></i> Login with Facebook </a> <a href="#" class="twitter btn"> <i class="fa fa-twitter fa-fw"></i> Login with Twitter </a> <a href="#" class="google btn"> <i class="fa fa-google fa-fw"></i> Login with Google+ </a> </div> <div class="col"> <div class="hide-md-lg"> <p>Or sign in manually:</p> </div> <input type="text" name="username" placeholder="Username" required> <input type="password" name="password" placeholder="Password" required> <input type="submit" value="Login"> </div> </div> </form> </div> <div class="bottom-container"> <div class="row"> <div class="col"> <a href="#" style="color:white" class="btn">Sign up</a> </div> <div class="col"> <a href="#" style="color:white" class="btn">Forgot password?</a> </div> </div> </div>
Langkah 2) Tambahkan CSS:
Contoh
* { box-sizing: border-box; } /* style untuk container */ .container { position: relative; border-radius: 5px; background-color: #f2f2f2; padding: 20px 0 30px 0; } /* style inputs dan link buttons */ input, .btn { width: 100%; padding: 12px; border: none; border-radius: 4px; margin: 5px 0; opacity: 0.85; display: inline-block; font-size: 17px; line-height: 20px; text-decoration: none; /* hapus garis bawah dari anchor */ } input:hover, .btn:hover { opacity: 1; } /* tambahkan warna yang sesuai untuk button fb, twitter dan google */ .fb { background-color: #3B5998; color: white; } .twitter { background-color: #55ACEE; color: white; } .google { background-color: #dd4b39; color: white; } /* style untuk submit button */ input[type=submit] { background-color: #4CAF50; color: white; cursor: pointer; } input[type=submit]:hover { background-color: #45a049; } /* layout dua kolom */ .col { float: left; width: 50%; margin: auto; padding: 0 50px; margin-top: 6px; } /* Hapus floats setelah kolom */ .row:after { content: ""; display: table; clear: both; } /* garis vertical */ .vl { position: absolute; left: 50%; transform: translate(-50%); border: 2px solid #ddd; height: 175px; } /* teks di dalam garis vertikal */ .vl-innertext { position: absolute; top: 50%; transform: translate(-50%, -50%); background-color: #f1f1f1; border: 1px solid #ccc; border-radius: 50%; padding: 8px 10px; } /* sembunyikan beberapa teks di layar sedang dan besar */ .hide-md-lg { display: none; } /* bottom container */ .bottom-container { text-align: center; background-color: #666; border-radius: 0px 0px 4px 4px; } /* Layout responsif - jika lebar layar kurang dari 650 piksel, buat dua kolom bertumpuk, bukan bersebelahan */ @media screen and (max-width: 650px) { .col { width: 100%; margin-top: 0; } /* sembunyikan garis vertical */ .vl { display: none; } /* tunjukkan teks tersembunyi di layar kecil */ .hide-md-lg { display: block; text-align: center; }