CSS ile Linklere Düz Çizgi Yerine Hareketli Dalgalı Çizgi

Linkler varsayılan olarak altı düz çizgili elemanlardır web sitelerinde. Kullanıcının ilgisini çekmesi yönünde kullandığımız zamanlar da olur bu altı çizgili linkleri. Mesela linki varsayılan olarak altı çizgisiz yapıp, kullanıcı üzerine geldiğinde altı çizgili olmasını sağlayabiliyoruz. Peki kullanıcının daha çok ilgisini çekmek istesek?

Bu makalede linklerdeki düz çizgi yerine, dalgalı ve hareketli, animasyonlu bir alt çizgi oluşturmaya çalışalım. Fare imleci, linkin üzerine geldiğinde sıradanlıktan uzak, hareketli bir alt çizgi ile karşılaşıyor.

Önce standart link kodunu, ardından stil dosyasaına CSS kodlarını yazalım.

<a href="#">Sanagrafi</a>

>a {
  border-bottom: 1px solid #000;
  color: #000;
  padding-bottom: .25em;
  text-decoration: none;
}

Linkler için HTML ve CSS kodlarını yazdıktan sonra animasyonlu alt çizgiye geçebiliriz. Hareketli ve dalgalı bir alt çizgi yapmak için SVG dosyasından faydalanıyoruz. SVG’yi CSS’te background-image etiketi ile birlikte kullanıyoruz. Fare imleci linkin üzerine geldiğinde alt çizginin dalgalı olmasını ve sonsuz bir döngüyle kayıyormuş gibi görünmesini ise aşağıdaki kod ile sağlıyoruz.

a:hover {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='%23453886' stroke-width='2' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E");
  background-position: bottom;
  background-repeat: repeat-x;
  background-size: 20%;
  border-bottom: 0;
  padding-bottom: .3em;
  text-decoration: none;
}