26.3.15
36
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.

Tombol KLIK



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..!>



Agar pekerjaan Anda lebih mudah, sebagai contoh dibawah ini sudah saya siapkan beberapa tutorial efek yang bisa Anda tampilkan disana sebagai tahap percobaan, silahkan pilih efek Anda disini:

» Membuat Animasi Teks Berputar Efek 3D
» Memberi Tanggal Terbit Pada Gambar Saat Hover
» Menampilkan Bayangan Teks Saat Hover
» Tombol Share Bouncing Fixed Shadow

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Cara Membuat Floating Button Dengan CSS Modal
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

36 komentar

  1. Keren banget.....top markotop

    BalasHapus
  2. ide2 devy selalu segar dan menarik ...
    bner2 cerdas dan kreatif .... :)

    jadi bingung sy mw tanya apa ... hehe

    BalasHapus
    Balasan
    1. biasa kok mas, jadi kalau begitu devy gak akan jawab, soalnya kan gak ada yang mas fiu tanyakan, hehe,,!!

      Hapus
    2. buat devy mungkin biasa, tpi buat sy itu luar biasa ,,, hehehe (f)

      sbnrny sih yg mw sy tanyakan buanyakkk ... tpi mw mulai dri mana belum ktemu ... hehe

      Hapus
    3. pasti mau nanya malam mingguan hehe

      Hapus
    4. hehehehe, aduh mb tika ini eh ,,,,, :-)

      Hapus
    5. saya sih mendukung aja, asal pulang bawa martabak fiu....

      Hapus
  3. berguna sekali nih buat para blogger yang sering membagikan kode css, jadi lebih cantik, selain itu, floatting button css modal ini juga menarik untuk tombol pemberitauan...

    BalasHapus
    Balasan
    1. benar sekali bos, bilamana membagikan kode CSS dan harus menampilkan hasilnya dalam sebuah halaman statis (demo) bisa menggunakan cara demikian. sembunyikan hasilnya dan akan ditampikan jika tombol di klik.

      Hapus
  4. Cssnya banya juga mbak...

    BalasHapus
    Balasan
    1. cuma sedikit kok mas, gak sampai 2 halaman kan.?
      hehe

      Hapus
    2. yang jelas gak seluas lapangan bola hab....

      Hapus
    3. hahahahahahahaha..........btul sekali

      Hapus
  5. Gak paham sama sekali dengan ulasan diatas mbak?

    BalasHapus
    Balasan
    1. yah kalau udah malas gak akan faham sih mas...
      saya juga dulunya gak bisa sama sekali sama yang namanya coding
      sering mumet dibuatnya, tapi mungkin karena suka aja ama hasilnya makanya saya pelajari terus. akhirnya bisa juga walau gak sehebat sabata saya tukang coding ini...heeee

      Hapus
  6. saya suka banget floating button kayak gini
    cuman saya ampun deh, kalau harus edit css, huehehe:)

    BalasHapus
    Balasan
    1. pelajari dengan pelan dan terapkan....itu aja kok kuncinya bro. sederhana kan?
      intinya asal mau aja pusing dikit...tapi hasilnya pasti memuaskan.

      Hapus
  7. keren mba devi, mba devi tau dari mana yang kayak ginian?hehe

    BalasHapus
  8. sepertinya sangat membantu dan membuat penasaran pengunjung untuk mengklik tombol open ya vy, "Letakkan Sebuah Efek Tutorial Disini" untuk konten dalam tombol ya...? maaf mencernanya rada lambat hehe..

    BalasHapus
    Balasan
    1. nah ,,, itu tuh yg bikin sy juga makin penasaran ,,,, hehe

      Hapus
    2. benar teh, seperti 4 contoh link efek yang saya sertakan disana, sebagai percobaan coba letakkan efek itu dalam HTML, maka saat tombol open di klik, efek yang diletakkan didalamnya akan terbuka dalam 1 area tag body.

      jadi tidak membutuhkan lagi halaman statis untuk menampilkan hasil DEMO

      Hapus
    3. menarik dan irit juga teh tika, karena gak banyak makan tempat dan atraktif membuat penasaran untuk mengkliknya.

      Hapus
  9. sudah melihat demonya...bagus dan menarik sista untuk floating buttonnya. mana bikinnya juga dengan css sehingga tidak memberatkan loading. trick menggunakan transisi dan keyfreming yang bagus...saya pelajari ya sista. makasih juga telah banyak memberikan masukan masalah coding kepada saya. salam sahabat blogger.

    BalasHapus
    Balasan
    1. aahhh mbah dinan bisa aja...devy masih belajar juga kok. kita sama-sama berbagi ya mbah...

      saya balas sendiri aja dev...kayaknya sama aja kali balasannya ya...heheheee

      Hapus
    2. beda kok mbah ...hhe

      Hapus
  10. kalau utak-atik blog nggak bakalan bingung lagi datang kesini saja maknyus

    BalasHapus
  11. Bukan bidang say kayaknya ni?

    BalasHapus
  12. Melihat strukturnya, sepertinya tidk terlalu ribet ya......ijin mempelajari dulu mbak devi

    BalasHapus
  13. ooo, ini langsung ada hasil tertentu ya mbak setelah di klik buttonnya, wah kereeeeeenn!

    BalasHapus
  14. keren mbk, dibuat buku aja mbk, siapa tahu banyak penerbit yang tertarik dan kepencut untuk kontrak :)

    BalasHapus
  15. Oass mbak Devi pinter dehh (h)

    BalasHapus
  16. Banyak banget ilmunya.. saya masih takut ngutak-atik html :D

    BalasHapus
  17. Haduuh, puyeng jg ngliat kodenya mbak... :D

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK