Cara Membuat Floating Button Dengan CSS Modal

Cara Membuat Floating Button Dengan CSS Modal - Membuat tombol KLIK (button) seperti ini sama halnya dengan tampilan tombol yang sering Anda lihat pada umumnya pada tutorial blog, perbedaannya adalah apa yang akan Anda tampilkan jika tombol tersebut di klik oleh pengunjung dan bagaimana pula pengalihan halaman yang akan Anda perintahkan saat tombol terbuka. Seperti Cara Membuat Tombol Klik Show Info pada artikel efek sebelumnya, dimana saat tombol di klik, sistem akan mengarahkan Anda untuk melihat hasil tampilan yang berada dibalik tombol tersebut, namun event saat tombol terbuka hanya akan terjadi dalam 1 area halaman, inilah yang dinamakan dengan CSS modal.

CSS modal difungsikan untuk memerintah sebuah link agar terbuka dalam 1 tag body, artinya jika sebuah tombol link di klik, maka halaman sebagai link tujuan akan terbuka hanya dalam area itu (bukan dialihkan pada tab baru atau halaman baru) seperti ini:

DEMO SHOW



Nah..! coba Anda perhatikan tombol DEMO SHOW diatas, jika tombol tersebut Anda KLIK, maka Anda akan dialihkan pada halaman baru (target="_blank") yang ditujukan pada sebuah link yang tertaut dalam tombol tersebut, namun coba KLIK tombol OPEN pada hasil DEMO, maka halaman yang terbuka sebagai target akan tampil pada halaman saat itu. Tujuan membuat floating button dengan CSS modal seperti ini akan sangat membantu Anda bilamana suatu saat Anda ingin membuat sebuah artikel tentang tutorial atau efek blog, dan harus menampilkan hasil kerja Anda dengan tombol DEMO untuk melihat hasil tampilan, jadi Anda bisa menggunakan event ini untuk mendukung postingan jika Anda belum membuat halaman statis untuk menampilkan hasil kerja Anda.

Penerapannya pun sangat mudah, disini sudah saya siapkan semua bahan-bahannya, dan semuanya sudah saya racik dalam 1 menu siap saji untuk membuat button floating pada blog Anda. Cukup copy semua kode CSS dibawah ini, atau edit seperlunya saja, lalu letakkan pada halaman postingan Anda mode tulis HTML. Kode lengkapnya seperti ini:

<style>
.floating {position: relative;width: 100%;margin: 0 auto;height:400px}
.button {height: 100%;position: relative;overflow: hidden}
.button >.btn {
  -webkit-transition: all 0.5s;-moz-transition: all 0.5s;transition: all 0.5s;
  max-width: 1000px;max-height: 1000px;position: absolute;
  right: 10px;bottom: 340px}

.btn-float {
  width: 55px;height: 55px;background: #FF4081;border-radius: 50%;
  color: #eee;text-align: center;letter-spacing: 0.5px;line-height: 56px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12)}

.btn-float i {font-size: 1.6rem;}
.button-container.open>.btn:before {display: none}
.modal {
  z-index: 20;display: none;position: relative;top: -100%;width: 100%;
  height: 100%;color: #eee;border-left:15px solid blue;background-color: #FF4081;
  box-shadow: 0px 2px 5px rgba(0,0,0,0.4)}

.modal>.close {
  display: inline-block;position: relative;margin: 5px;right: -18px;
  width: 23%;float:right;font-size: 1.6rem;line-height: 37px; color: #fff;
  text-align:center;text-shadow:1px 2px 1px #111;background:blue}

.modal>.close::after {
  border-width: 7px;border-style: solid;
  border-color: #134 transparent transparent #134;content: "";
  position: absolute;top:100%;right:0px;width:0px;height:0px}

.modal>.close:hover {cursor: pointer}
.modal>.modal-content {width: 100%;padding: 10px}
.modal>.modal-content>p {font: 15px Verdana;text-align: justify;padding:15px 20px 0 0}

@keyframes slide {
 0% {width:70px;height: 56px;background:#e06666}
 5% {width:100px;height: 56px;margin-right:20%;background:#39f}
 10% {width:130px;height: 56px;margin-right:30%;background:#4e5ff9}
 20% {width:70px;height: 56px;margin-right:40%;background:#080}
 25% {width:56px;height: 56px;margin-bottom:0px;margin-right:40%;background:orange}
 100%{width:200%;height:200%;margin-bottom:-50%;margin-right:-40%;background:purple}}

/*support all peramban browser*/
@-webkit-keyframes slide {...}
@-moz-keyframes slide {...}
@-ms-keyframes slide {...}
@-o-keyframes slide {...}

.slide {
  position: relative;
  -webkit-animation-name: slide;
  -webkit-animation-duration: 1s;
  -webkit-animation-fill-mode: forwards}
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
 $('body').on('click', '.btn-float', function(event) {
  event.preventDefault();
  var ele = $(this);
  $(this).parent().addClass('open');
  $(this).addClass('slide');
  setTimeout(function() {
   ele.parent().siblings().fadeIn();
   setTimeout(function() {
    ele.parent().removeClass('open');
    ele.removeClass('slide');
   }, 500)
  }, 600);
 });

 $('body').on('click', '.close', function(event) {
  event.preventDefault();
  $(this).parent().fadeOut();
 });
});
</script>

Anda bisa letakkan Apa saja disini, pada hasil tampilan disana saya membuat sebuah content box, terserah dengan Anda, apa yang akan Anda tampilkan disana jika nantinya tombol di KLIK, silahkan ganti teks yang saya beri warna MERAH dengan hasil kerja Anda pada HTML pemanggil dibawah ini:

<div class="floating">
   <div class="button">
      <a href="#" class="btn btn-float">Open</a>
   </div>
   <div class="modal">
      <a href="#" class="close">Close Info</a>
         <div class="modal-content">
             <p>...Letakkan Sebuah Efek Tutorial Disini...</p>
         </div>
   </div><!..Ending modal..!>
</div><!..Ending floating button container..!>