SBTM77: Cara Membuat Floating Button Dengan CSS

Berikut ini akan diuraikan langkah-langkah cara membuat ( Floating Button Dengan CSS Modal ) semoga artikel kali ini bermanfaat untuk kita semua.
Adapun Cara membuat : ( Floating Button Dengan CSS Modal ) sebagai berikut :

DAFTAR ISI CODE [Tampilkan][Sembunyikan]

CSS Kode

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

HTML Kode

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

JavaScrip Kode, letakan di atas < /body > Kode

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

Setelah semua kode html, (style, atau b:skin, dan javascript sudah di pasang sesuai posisinya masing-masing langkah terahir adalah Simpan, atau klik pratinjau tema terlebih dahulu,. Namun untuk saran tiada salahnya langsung klik SIMPAN dan lihat hasilnya, jika terjadi eror, dan kode tidak berfungsi dengan baik silahkan informasikan kami di kolom komentar, salam Team SAHAB BISNIS 77.

Demikian Cara membuat ( Floating Button Dengan CSS Modal ) semoga bermanfaat terima kasih.

Contohnya

Open

SBTM77

Cara Membuat Floating Button Dengan CSS

Tidak ada komentar

Posting Komentar