Membuat Button Facebook dengan Jquery

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



pada



Nah teman-teman dapat lihat di gambar di atas ini yaitu button facebooknya ketika di klik karenanya akan menampilkan form “Login with Facebook”



pada



Kita akan membangun persis seperti di 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 di browsernya, karenanya hasilnya seperti gambar di bawah ini



pada



Bila telah, tambahkan css nya di pada 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 di browsernya



pada



Karenanya button telah berhasil di bikin, kemudian kita tambahkan kegunaan Jquery nya bagi menampilkan formnya. Teman-teman jangan lupa berikan librarynya atau dapat 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>


Bila telah save dan refresh di browsernya, karenanya form “Login with Facebook” telah berhasil di bikin. Lumayan sulit bukan,,?!?  🙂



Oke demikianlah dulu di artikel kali ini mengenai Membuat Button Facebook dengan Jquery kita berjumpa lagi di artikel berikutnya, semoga bermanfaat.



Terimakasih dan hingga jumpa.




Sumber https://kursuswebsite.org

Popular posts from this blog

Cara Menghapus Isi Dari Form Input Menggunakan Javascript

Image
Salam hangat teman-teman, semoga teman-teman sehat selalu ya, Kali ini saya akan mencoba membagi Cara Menghapus Isi Dari Form Input Menggunakan Javascript. Terkadang di ketika kita menginput comment di suatu laman pasti pernah mengalami salah ketik atau ingin menghapus segala isian form yang telah kita isi. Nah, kini saya akan mencoba membangun tombol atau button bagi menghapus isinya sekaligus.
Read more

Membuat Form Menarik Menggunakan HTML dan CSS

Image
Halo sobat, apa kabar segala. Berjumpa lagi dengan saya di panduan Source Code Aplikasi , di artikel kali ini kita akan latihan Membuat Form Menarik  Menggunakan HTML dan CSS . Form yang akan kita bikin yaitu form yang benar-benar cantik khususnya para kaum hawa yang menyukai warna pink,
Read more