Cara Membuat Link dengan efek tembakan laser

CSS3 memang mengagumkan!!
Sumber : klikedukasi.com
Itulah yang terucap saat menemukan (baca: mencontek) trik ini. Saat baca-baca kumpulan snippet di http://css-tricks.com tepatnya di bagian footer, saya melihat link yang cukup unik. Saat pointer mouse melewati link ini, maka pancaran cahaya seperti laser terlihat berkelebat menembak ke arah kanan. Entahlah, link apa ini namanya.

Penasaran dengan itu, langsung deh coba coba bereksperimen sambil sesekali melirik situs css-tricks

Hasilnya, seperti yang ada di bagian bawah posting ini

Buat kerangka html seperti di bawah:

<div class="jaketanbenanget">
 <div class="tembak">
   <a href="#">Tembaakkkk dor dor dor<span></span></a>
 </div>
</div>

Beri sedikit sentuhan tampilan dengan CSS

.jaketanbenanget {
 background: black;
 width: 500px;
 height: 50px;
 padding: 20px
}
.tembak {
 position:relative;
}
.tembak a {
 text-decoration: none;
 color: white;
}
.tembak a>span {
 position:absolute;
 background: black;
 bottom:0;
 left: 0;
 width:100%;
 height:1px;
 background:-webkit-gradient(linear,0% 50%,100% 50%,color-stop(0%,#ffffff),color-stop(5%,#ffffff),color-stop(5%,rgba(255,255,255,0.25)),color-stop(100%,rgba(255,255,255,0)));
 background:-webkit-linear-gradient(left,#ffffff,#ffffff 5%,rgba(255,255,255,0.25) 5%,rgba(255,255,255,0));
 background:-moz-linear-gradient(left,#ffffff,#ffffff 5%,rgba(255,255,255,0.25) 5%,rgba(255,255,255,0));
 background:-o-linear-gradient(left,#ffffff,#ffffff 5%,rgba(255,255,255,0.25) 5%,rgba(255,255,255,0));
 background:linear-gradient(left,#ffffff,#ffffff 5%,rgba(255,255,255,0.25) 5%,rgba(255,255,255,0));
 background-position:100% 0;
 -webkit-background-size:200% 100%;
 -moz-background-size:200% 100%;
 -o-background-size:200% 100%;
 background-size:200% 100%;
 -webkit-transition:background 0s linear;
 -moz-transition:background 0s linear;
 -o-transition:background 0s linear;
 transition:background 0s linear;
}

.tembak a:hover>span {
 background-position:-100% 0;
 -webkit-transition:background 0.4s;
 -moz-transition:background 0.4s;
 -o-transition:background 0.4s;
 transition:background 0.4s;
}