Membuat Button Facebook dengan Jquery

by | Jan 8, 2017 | HTML CSS, jQuery, Tips Trik | 0 comments

Halo teman-teman, apa kabar semuanya. Pastinya selalu baik-baik saja ya, dan sehat selalu. Oke selamat datang di artikel dumet school, pada tutorial kali ini kita akan belajar Membuat Button Facebook dengan Jquery dimana kita mempunyai sebuah button ketika di klik maka akan muncul form “Login with Facebook“. Mari kita lihat demo nya pada gambar di bawah ini

Membuat Button Facebook dengan Jquery

Nah teman-teman bisa lihat pada gambar di atas ini adalah button facebooknya ketika di klik maka akan menampilkan form “Login with Facebook”

Membuat Button Facebook dengan Jquery

Kita akan membuat persis seperti pada demo gambar di atas, pertama-tama siapkan text editornya lalu copy script html nya di bawah ini

<!DOCTYPE html>
<html>
<head>
	<title>Button Facebook</title>
</head>
<body>
<div class="block">
  <div class="btn-fb-login">
    <span class="icon icon-fb"></span>
    <span class="title">Login with Facebook</span>
  </div>
  <div class="fb-login">
    <div class="title">Login with Facebook</div>
    <div class="login-form">
      <form method="post">
        <input type="text" placeholder="E-mail" />
        <input type="password" placeholder="Password" />
        <button type="submit" class="btn btn-login">Login</button>
      </form>
    </div>
  </div>
</div>
</body>
</html>

Kemudian save dengan nama index.html dan buka pada browsernya, maka hasilnya seperti gambar di bawah ini

Membuat Button Facebook dengan Jquery

Jika sudah, tambahkan css nya di dalam tag <head>

<style type="text/css">
html {
  background: url(http://s.cdpn.io/6035/fb_login_bg.png) repeat;
}

body {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 300;
}

.block {
  width: 175px;
  margin: 50px auto;
}

.btn-fb-login {
  width: 100%;
  height: 30px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQ4NmJiNSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzMzNGU4NyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #486bb5), color-stop(100%, #334e87));
  background-image: -moz-linear-gradient(top, #486bb5 0%, #334e87 100%);
  background-image: -webkit-linear-gradient(top, #486bb5 0%, #334e87 100%);
  background-image: linear-gradient(to bottom, #486bb5 0%, #334e87 100%);
  box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.2);
  cursor: pointer;
}
.btn-fb-login:hover {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQ4NmJiNSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzIzM2I2YyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #486bb5), color-stop(100%, #233b6c));
  background-image: -moz-linear-gradient(top, #486bb5 0%, #233b6c 100%);
  background-image: -webkit-linear-gradient(top, #486bb5 0%, #233b6c 100%);
  background-image: linear-gradient(to bottom, #486bb5 0%, #233b6c 100%);
}
.btn-fb-login .icon {
  background: url(http://s.cdpn.io/6035/fb_login_sprite.png) no-repeat;
  width: 11px;
  height: 22px;
  display: inline-block;
  float: left;
  margin: 3px 10px;
}
.btn-fb-login .title {
  font-size: 0.8125em;
  color: #fff;
  line-height: 30px;
  float: left;
  padding: 0 10px;
  text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.5);
  box-shadow: -1px 0 0 rgba(255, 255, 255, 0.1);
  border-left: 1px solid rgba(0, 0, 0, 0.3);
}

.fb-login {
  display: none;
  width: 100%;
  margin-top: 20px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQ4NmJiNSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzMzNGU4NyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #486bb5), color-stop(100%, #334e87));
  background-image: -moz-linear-gradient(top, #486bb5 0%, #334e87 100%);
  background-image: -webkit-linear-gradient(top, #486bb5 0%, #334e87 100%);
  background-image: linear-gradient(to bottom, #486bb5 0%, #334e87 100%);
  box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.2), 0 0 25px rgba(0, 0, 0, 0.3);
}
.fb-login .login-form {
  width: 155px;
  margin: 10px;
}
.fb-login .title {
  font-size: 0.875em;
  color: #fff;
  text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.5);
  text-align: center;
  padding: 10px 0;
  margin: 0 0 10px 0;
}
.fb-login input[type=text], .fb-login input[type=password] {
  width: 100%;
  height: 30px;
  margin: 0 0 10px;
  padding: 0 5px;
  display: inline-block;
  background: rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  box-sizing: border-box;
  box-shadow: inset 0 1px 3px rgba(40, 40, 40, 0.3), 0 1px 0 rgba(255, 255, 255, 0.1);
  font-size: 0.6875em;
  color: #fff;
  outline: none;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
  transition: background 0.3s ease;
}
.fb-login input[type=text]:focus, .fb-login input[type=password]:focus {
  background: rgba(0, 0, 0, 0.03);
}
.fb-login .btn {
  width: 100%;
  height: 30px;
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY0ODZjZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzRhNmJhZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #6486cf), color-stop(100%, #4a6baf));
  background-image: -moz-linear-gradient(top, #6486cf 0%, #4a6baf 100%);
  background-image: -webkit-linear-gradient(top, #6486cf 0%, #4a6baf 100%);
  background-image: linear-gradient(to bottom, #6486cf 0%, #4a6baf 100%);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3), 0 1px 1px rgba(0, 0, 0, 0.1);
  color: #fff;
  font-size: 0.75em;
  text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.4);
}
.fb-login .btn:hover {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY0ODZjZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNiNWE5OSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #6486cf), color-stop(100%, #3b5a99));
  background-image: -moz-linear-gradient(top, #6486cf 0%, #3b5a99 100%);
  background-image: -webkit-linear-gradient(top, #6486cf 0%, #3b5a99 100%);
  background-image: linear-gradient(to bottom, #6486cf 0%, #3b5a99 100%);
}
.fb-login .btn:active {
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.4);
  background: #35518d;
}
</style>

Save dan refresh pada browsernya

Membuat Button Facebook dengan Jquery

Maka button telah berhasil di buat, kemudian kita tambahkan fungsi Jquery nya untuk menampilkan formnya. Teman-teman jangan lupa berikan librarynya atau bisa copy di bawah ini

<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.js"></script>

Berikutnya tambahkan script Jquery nya

<script type="text/javascript">
	$('.btn-fb-login').on('click',function(){
  		$(this).fadeOut(function(){
    $('.fb-login').fadeIn();
  });
});
</script>

Jika sudah save dan refresh pada browsernya, maka form “Login with Facebook” sudah berhasil di buat. Cukup sulit bukan,,?!?  🙂

Oke sekian dulu pada artikel kali ini tentang Membuat Button Facebook dengan Jquery kita berjumpa lagi di artikel berikutnya, semoga bermanfaat.

Terimakasih dan sampai jumpa.