Sunday, March 2, 2014

Dynamic buttons CSS3


Dynamic buttons CSS3 - Dynamic buttons CSS3 merupakan style button code tag html dengan memakai CSS 3, pada dasarnya penggunaan metode button pada CSS 2 dan CSS 3 hampir sama hanya saja untuk CSS 3 codenya lebih meningkat atau ada beberapa code dengan kemampuan yang menurut saya luar bisa di lakukan oleh CSS 3. Bila anda penasaran dengan tampilannya silahkan lihat demo Dynamic buttons CSS3 ini melalui link demo dibawah. Bila anda tertarik memasangnya silahkan lihat tutorial Dynamic buttons CSS3 dibawah ini, langsung saja menuju TKP.



Code CSS here..

.tombol {display: inline-block;background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibknLcp0N_enDITOTmwwjv4rJvVaVR4ZDDFnApKa5p6eNsNVxSmEKXL6AUrsapjenDnE-iAUYQNWwY04Usicj0-WOl15fg9c_hGrc0HT8pRXUU6emT_iM8JHvsSIuDb9An6mU4I-f5Loh6/s1600/dinamic-button.png") repeat-x 0px 0px;padding:5px 10px 6px 10px;font-weight:bold;text-shadow: 1px 1px 1px rgba(255,255,255,0.5);border:1px solid rgba(0,0,0,0.4);}.tombol:hover {text-shadow: 1px 1px 1px rgba(0,0,0,0.5);cursor:pointer;}/* warna tombol */.warna-biru {background-color: #CCCCCC; color: #141414;}.warna-biru:hover {background-color: #00c0ff; color: #ffffff;}.warna-hijau {background-color: #CCCCCC; color: #141414;}.warna-hijau:hover{background-color: #006600; color: #ffffff;}.warna-merah {background-color: #CCCCCC; color: #141414;}.warna-merah:hover {background-color: #800000; color: #ffffff;}

Code HTML here..

<p><strong> Demo dynamic buttons CSS3</strong></p><div class="tombol warna-merah">click here !</div><div class="tombol warna-hijau">Readmore</div><div class="tombol warna-biru ">Dynamic Buttons CSS3</div> <p>Ukuran font 12px:</p><div style="font-size: 12px;"><div class="tombol warna-merah">click here !</div><div class="tombol warna-hijau">Readmore</div><div class="tombol warna-biru ">Dynamic Buttons CSS3</div></div> <p>Ukuran font 10px:</p><div style="font-size: 10px;"><div class="tombol warna-merah">click here !</div><div class="tombol warna-hijau">Readmore</div><div class="tombol warna-biru ">Dynamic Buttons CSS3</div>
</div>


Bagikan ke :

Facebook Google+ Twitter Digg Technorati Reddit
0 Comments
Tweets
Komentar

0 comments:

Post a Comment