Kotak Melayang
CSS
span {
display:inline-block;
position:relative;
background-color:white;
width:70px;
height:70px;
margin:0 5px;
-webkit-box-shadow:0 10px 5px -4px rgba(0,0,0,.2);
-moz-box-shadow:0 10px 5px -4px rgba(0,0,0,.2);
box-shadow:0 10px 5px -4px rgba(0,0,0,.2);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
font:normal normal 30px/70px "Comic Sans MS",Verdana,Arial,Sans-Serif;
text-align:center;
color:#888;
cursor:default;
}
span:hover {
top:5px;
-webkit-box-shadow:0 2px 2px rgba(0,0,0,.2);
-moz-box-shadow:0 2px 2px rgba(0,0,0,.2);
box-shadow:0 2px 2px rgba(0,0,0,.2);
}
span:active {
top:6px;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow:0 1px 2px rgba(0,0,0,.2);
box-shadow:0 1px 2px rgba(0,0,0,.2);
}
Demo
Labels: CSS, Desain, Eksperimen, Potongan
14 Comments:
weww itu semacamm tombol pencet pencet
By abang ichal, at Saturday, September 1, 2012 at 11:00:00 AM GMT+7
Ha..ha..aya-aya wae nih Bang Aufiq.....
By Kang Kapuk, at Saturday, September 1, 2012 at 3:39:00 PM GMT+7
jadi menarik krn perpaduan warna dan shadownya pas banget.
kayak kopi gitoooh
By Beben Koben, at Saturday, September 1, 2012 at 8:55:00 PM GMT+7
mas untuk tombol2 itu bisa di isi link gak ya..?
By Unknown, at Saturday, November 16, 2013 at 10:45:00 AM GMT+7
Ganti elemen <span> dengan <a>
By Taufik Nurrohman, at Monday, November 18, 2013 at 11:56:00 AM GMT+7
This comment has been removed by the author.
By Anonymous, at Monday, November 18, 2013 at 11:58:00 AM GMT+7
Bantuin apa? Bantuin simsalabim prok-prok-prok? Pertanyaannya tidak jelas.
By Taufik Nurrohman, at Monday, November 18, 2013 at 12:10:00 PM GMT+7
saya mau buat sistem quote di komentar blogger dengan memanfaatkan permalink mas
By Anonymous, at Monday, November 18, 2013 at 12:13:00 PM GMT+7
Telat. Komentarmu sudah terhapus :\
By Taufik Nurrohman, at Monday, November 18, 2013 at 12:17:00 PM GMT+7
saya tadi pengen nyoba buat di jsfiddle colaborate hehe tapi gak ada temen hehe
<a rel="nofollow" href="http://nevermore-404.blogspot.com/2013/06/template-061813.html?showComment=1381504560063#c5538618462762517604">Jumat, Oktober 11, 2013</a>
terus ambil c5538618462762517604 buat IDnya nanti .html di comentar pake .replace
ngerti gak mas :(
By Anonymous, at Monday, November 18, 2013 at 12:25:00 PM GMT+7
mas mau nanya,ini kok gak muncul inputnya ya ??
$(function() {
var $button = $('.item-control'),
$quote = $('.quote');
$button.after('<a class="qoute" href="#9869595">Quote</a>');
$quote.on("click", function() {
$(this).after('<input class="quot" type="text" size="6" value=" ' + this.href + '" />');
});
});
By Anonymous, at Monday, November 18, 2013 at 12:32:00 PM GMT+7
Masalahmu keluar dari topik pos ini, tidak enak kalau dibahas di sini. Selain itu formulir komentar Blogger itu memakai iframe, jadi kalaupun dibahas ya tetap tidak akan berhasil.
By Taufik Nurrohman, at Monday, November 18, 2013 at 12:33:00 PM GMT+7
iya mas maaf makanya tadi pengen di js fiddle
mkst saya nanti pertama ambil html dari id #c5538618462762517604 pas Quote di klik muncul <i rel="code">#c5538618462762517604</i>
terus pas ada orang yang komentar begitu di ubah pake .replace jadi isi html dari komentar dengan id #c5538618462762517604
By Anonymous, at Monday, November 18, 2013 at 12:38:00 PM GMT+7
nih mas link nya http://jsfiddle.net/#&togetherjs=V9CyPzoxSo
By Anonymous, at Monday, November 18, 2013 at 12:40:00 PM GMT+7
Post a Comment
<< Home