Toggle Effect Pure Use CSS3

Show hide trick memang tidak ada habisnya buat postingan :)) Pernah dulu juga membahas show/hide pure use CSS for CBOX kala disorot terbukalah anunya :D Feature show-hide hampir serupa fungsi dengan slide in function, appear lost or etc yang dimana pada jQuery kita kenal dengan toggle effect ;))
Datang trik berikut dari lists of my inspiration, the great web simurai talking about toggle button. Hanya menggunakan variable CSS 3 dikombinasikan tentunya dengan kode HTML bisa menghasilkan toggle effect layaknya memakai script :x

Pada pemaparan (demo) disana terdapat pemakaian coded transform: rotate guna memberikan efek pada gambar supaya terlihat berubah/berganti saat kita klik. Beben Koben si bloglang anu ganteng kalem tea melakukan sedikit perampingan kode CSS dengan meniadakan hal tersebut. Soalnya disini menurut aku, yang penting sisi tampil & menghilangnya ketika kita click :D

Demo

demo Toggle Effect Pure Use CSS3
Klik tulisan Buku Tamu sebelah kiri yg berwarna latar belakang pink :D Seperti itulah hasil modifikasi aa oben ;)) Bila sobat berminat, kemon kita lanjutkan tut's toggel efek. Masukan semua ramuan bumbu:
Dashboard ► Design ► Add a Gadget ► HTML/JavaScript

<style>
.kotak {
position: fixed;
bottom: 0;
right: 0;
padding: 5px;
border: 1px solid #555;
width: 350px;
background: #f4f4f4;
pointer-events: none;
opacity: 0;
-webkit-transform: translateY(-100px);
-moz-transform: translateY(-100px);
-o-transform: translateY(-100px);
transform: translateY(-100px);
-webkit-transition: -webkit-transform .5s cubic-bezier(.3, 0, 0, 1), opacity .5s cubic-bezier(.3, 0, 0, 1);
-moz-transition: -moz-transform .5s cubic-bezier(.3, 0, 0, 1), opacity .5s cubic-bezier(.3, 0, 0, 1);
-o-transition: -o-transform .5s cubic-bezier(.3, 0, 0, 1), opacity .5s cubic-bezier(.3, 0, 0, 1);
transition: transform .5s cubic-bezier(.3, 0, 0, 1), opacity .5s cubic-bezier(.3, 0, 0, 1);
}
/* toggle */
.toggel {
position: fixed;
display: inline-block;
width: 100px;
height: 30px;
border-radius: 10px;
margin: 1px;
background: #FF99FF;
top: 250px;
left: -15px;
}
.toggel a {
position: fixed;
width: 100%;
height: 30px;
text-align: center;
padding: 3px;
}
/* :target - this makes it possible to have different "states" */
#box:target .kotak, .toggel {
pointer-events: auto;
opacity: 1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
#box:target .toggel .top {
pointer-events: none;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
#box:target .toggel .bot {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
</style>

<div id="box">
<div class="kotak">

<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="350" height="305" src="http://www6.cbox.ws/box/?boxid=294584&amp;boxtag=7c3kfw&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" id="cboxmain"></iframe></div>
<div><iframe frameborder="0" width="350" height="80" src="http://www6.cbox.ws/box/?boxid=294584&amp;boxtag=7c3kfw&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border:#ababab 1px solid;border-top:0px"></iframe></div>
</div>

</div>
<div class="toggel">
 <a class="bot" href="#">Buku Tamu</a>
 <a class="top" href="#box"></a>
</div>
</div>

Keterangan:

• width: 350px;
Lebar, sesuaikan dengan lebar CBOX.
• bottom: 0;
Posisi dibawah.
• right: 0;
Posisi ada di kanan.
• background: #FF99FF;
Warna latar tombol.

Silahkan diatur-atur menurut selera :)
Artikel cool lain dari simurai:

http://lab.simurai.com/css/space-cacss/

http://lab.simurai.com/ui/cycle-button/

Bila membaca artikel disana, sobat pasti bisa membuat simple chat kayak aku...nih LESEHAN YUK! :D
Happy blogging \m/