Efek Hover Link/Tautan Menyala dengan CSS

Tabel Konten
  1. CSS 
  2. HTML 
css link menyala glowing

Tutorial yang sangat sederhana ini hanyalah sebuah teknik penerapan CSS Pseudo Classes, CSS Text Shadow dan CSS Transisi. Jadi, sebenarnya Saya yakin kamu sudah pernah menemukan ide ini sejak dulu. Tapi Saya hanya ingin membagikan teknik ini pada orang-orang yang belum tahu:

CSS 

a.murub {
  color:#ccc;
  text-decoration:none;
  text-shadow:1px 1px 0px #000,0 0 0px #000,0 0 0px #000,0 0 0px #000;
  -webkit-transition:all .5s ease-out;
  -moz-transition:all .5s ease-out;
  -o-transition:all .5s ease-out;
  transition:all .5s ease-out;
}

a.murub:hover {
  color:#fff;
  text-shadow:
    0px 1px 0px #FF00FF,
    0px 0px 3px #FF00FF,
    0px 0px 5px #FF00FF,
    0px 0px 30px #FF00FF,
    0px 3px 50px #FF00FF;
}

HTML 

<a class="murub" href="#">LINK</a>

6 Komentar

  • Unknown

    aq pake sob.., thx yaa.., *smile

  • ©Rhaditz

    bang ane mau nanya nih CSS-nya taru dimana soal'a masih newbie

  • Taufik Nurrohman

    @©Rhaditz Di atas ]]></b:skin>

  • Anonim

    wah keren banget mas bro..tak jajal nyobain juga

  • Unknown

    kang ijin pake ah ya :D

  • Unknown

    wah kang suka banget... makasih ya

Komentar telah ditutup.