di bawah ini adalah format nge-stel buton. jadi kerangka ringkasnya yaitu <style>-----</style>
anda hanya perlu menentukan type,class atau id yang akan anda pilih dan warna serta efek hover khusus jika anda mw bisa anda kreasikan sendiri...silakan ambil kode merah saja dan letakkan di atas ]]></b:skin>. dan
terlihat di bawah kode warna kuning adalah yang saya pilih "type" karena class saya udah terpake untuk efek lain drpd rombak ulang mending cari alternatif kan?? wkkwkwkwk.. dan penempatan class anda atus sesuai keinginan anda misalkan pada link widget saya di bawah ada tombol pasang widget ini itu juga menggunakan efek css3
... yah segitu saja bwt sobat smwa selamat berkreasi
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Button http://fauzilhaqqi.net</title> <style type="text/css"> input[type=button], button { /* tempat menambahkan style */ padding: 5px; width: 90px; outline-width: 0; border: 1px solid #000; border-radius: 50px; -moz-border-radius: 50px; -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, rgba(255, 255, 255, 0.8)), color-stop(0.01, rgba(255, 255, 255, 0.6)), color-stop(0.5, rgba(255, 255, 255, 0.3)), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(1.0, rgba(255, 255, 255, 0.0))); background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 1.0) 0%, rgba(255, 255, 255, 0.6) 1px, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.0) 100%); -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.9), inset 0px 1px 0px rgba(255, 255, 255, 0.5); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), inset 0px 1px 0px rgba(255, 255, 255, 0.5); background-color: #474; color: #fff; text-shadow: rgba(0, 0, 0, 0.5) 0px -1px 0px; -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, -webkit-box-shadow 0.2s ease-in-out; -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, -moz-box-shadow 0.2s ease-in-out; -o-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; } input[type=button]:hover, input[type=button]:focus, button:hover, button:focus { -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.9); -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.9); background-color: #696; } input[type=button]:active, button:active { background-color: #242; color: #ccc; -webkit-transition-duration: 0.0s; } body { padding: 20px; } </style> </head> <body> <input type="button" value="Login" /> </body></html>
0 komentar:
Post a Comment