Efek Hover Link/Tautan Menyala Dengan Css

Published by Concept Phone Rabu, 29 Agustus 2018

Tutorial yang sangat sederhana ini hanyalah sebuah teknik penerapan CSS Pseudo Classes, CSS Text Shadow dan CSS Transisi. Jadi, gotong royong Saya yakin kau sudah pernah menemukan ilham ini semenjak 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>

Lihat Demo

Sumber https://www.dte.web.id/