Halo teman-teman, pada kesempatan kali ini saya akan menggunakan efek CSS3 untuk membuat hover bintang. Mari kita mulai saja. Pertama buat sebuah folder dengan nama bintang untuk menyimpan file html dan css. Setelah itu kita akan mulai mengetikkan tag htmlnya terlebih dahulu. Ketikkan baris html dibawah ini.

<!DOCTYPE html>

<html>

<head>

                <title>CSS bintang</title>

                <link rel=”stylesheet” type=”text/css” href=”screen.css”/>

</head>

<body>

                                <a href=”#” class=”bintang”>

                                                <span><span><span><span><br />Klik<br />Disini<br />bintang!</span></span></span></span></a>

 

</body>

</html>

 

Simpan dengan nama index.html di dalam folder bintang. Kemudian kita akan buat file cssnya seperti di bawah ini.

.bintang {

                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;

               

}

.bintang 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;

}

.bintang:hover {

                background:transparent;

}

.bintang: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;

}

 

Kemudian save dengan nama screen.css kemudian kita lihat pada browser dengan cara double klik pada file index.html