3D CSS3 Chocolate Button

Sebelumnya saya telah menulis artikel tentang cara membuat CSS3 Gradient Button. Sebuah tutorial sederhana untuk menampilkan button menjadi lebih inovatif. Dan artikel kali ini pun masih berhubungan dengan button, tentunya masih menggunakan kode CSS3 yang telah memikat hati saya untuk dipelajari lebih lanjut.

3D CSS3 Chocolate Button

Button ini oleh creatornya Taufik Nurrohman diberi nama Chocolate button, bukan hanya warnanya yang coklat, tapi bentuknya juga hampir mirip coklat, manis serasa coklat asli. Tertarik untuk mencoba, berikut source codenya.

Salin kemudian tempel kode CSS berikut di atas kode ]]></b:skin>

/* Chocolate Button
----------------------------------------------- */
.choco {
	outline:none;
	cursor:pointer;
	display:inline-block;
	background-color:#54341A;
	text-shadow:0px 1px 0px rgba(255,255,255,0.1);
	text-decoration:none;
	font:normal 20px 'Monotype Corsiva','Book Antiqua',Georgia,Serif;
	color:#170D05;
	width:120px;
	text-align:center;
	margin:2px;
	padding:0px 0px;
	line-height:40px;
	border-top:9px solid #6A4021;
	border-right:10px solid #39210D;
	border-bottom:10px solid #241505;
	border-left:10px solid #402712;
	-webkit-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.15), 0px 1px 2px black;
	   -moz-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.15), 0px 1px 2px black;
	        box-shadow:inset 0px 1px 0px rgba(255,255,255,0.15), 0px 1px 2px black;
}
.choco:hover {
	background-color:#4B2E17;
	border-color:#5F391F #311F0D #170D03 #341F0F;
}
.choco:active {
	border-color:#170D03 #341F0F #5F391F #311F0D;
	-webkit-box-shadow:none;
	   -moz-box-shadow:none;
	        box-shadow:none;
}

<button class="choco">Chocolate</button>

Demo

Chocolate

Chocolate

Chocolate

Chocolate

Chocolate

Chocolate

—ς∞ς—

sumber: http://www.dte.web.id

Tweet

Postingan terkait:

Ditulis EM — Friday, 10 May 2013 — Add Comment — CSS3