Animasi Lingkaran Tombol dengan CSS css , html Kembali ke Tombol INI TOMBOL CSS! Source Kodenya: <html > <head> <title>Tombol CSS</title> <style type="text/css"> .b4 { display:block; width:6em; height:6em; -webkit-transform:rotate(-67.5deg); -moz-transform:rotate(-67.5deg); rotation:-67.5deg; position:relative; top:2em; left:2em; text-align:center; text-decoration:none; color:#000; font-weight:bold; font-family:Arial, sans-serif; text-shadow:-1px -1px -1px #fff, 1px 1px 1px #00f; } .b4 span { display:block; width:6em; height:6em; background:#78d7ff; -webkit-transform:rotate(22.5deg); -moz-transform:rotate(22.5deg); rotation:22.5deg; -moz-border-radius:2.5em; -webkit-border-radius:2.5em; border-radius:2.5em; -moz-transition: -moz-border-radius 0.2s ease-in; -webkit-transition: -webkit-border-radius 0.2s ease-in; transition: border-radius 0.2s ease-in; } .b4:hover { background:transparent; } .b4:hover span { background:#08f; color:#fff; text-shadow:0 0 20px #fff, 0 0 8px #fff; -moz-border-radius:0; -webkit-border-radius:0; border-radius:0; } </style> </head> <body> <p> <div class="b4"> <span><span><span><span> <br />INI <br /> TOMBOL <br />CSS! </span></span></span></span></div> </p> </body> </html> Share on Facebook Share on Twitter Share on Google Plus RELATED POSTS Navigation Effek BergoyangNavigasi Kanan dan AtasNavigation Bar Biru
0 komentar:
Posting Komentar