İçeriğe atla

Hover Link Efekti NodeBB

NodeBB
  • Merhabalar.

    Asagidaki kodlari CSS alaniniza eklediginiz zaman, linklerin, alinti ve nicklere hover eklemis olacaksiniz.

    .posts .content a {
      background-image: linear-gradient(to right, #54b3d6, #54b3d6 50%, #337ab7 50%);
      background-size: 200% 100%;
      background-position: -100%;
      display: inline-block;
      padding: 5px 0;
      position: relative;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      transition: all 0.3s ease-in-out;
    }
    
    .posts .content a:before {
      content: '';
      background: #54b3d6;
      display: block;
      position: absolute;
      bottom: 1px;
      left: 0;
      width: 0;
      height: 1px;
      transition: all 0.3s ease-in-out;
    } 
    
    .posts .content a:hover {
     background-position: 0;
    }
    
    .posts .content a:hover::before{
      width: 100%;
    }
    

Benzer konular