CSS effect sliding background color

Membuat effect sliding background color pada list menu

Syntax CSS
                .nav{
background: #232222;
width: 300px;
}
.nav li{
list-style: none;
margin-left: -40px;
border-bottom: 1px solid #353434;
}
.nav li a{
padding: 10px;
display: block;
color: #fff;
text-decoration: none; background-image: linear-gradient(to left, transparent, transparent 50%, #00c6ff 50%, #00c6ff);
background-position: 100% 0;
background-size: 200% 100%;
transition: all .40s ease-in;
}
.nav li:last-child { border-bottom:0px; }
.nav li a:hover {
background-position: 0 0;
color: #333;
padding-left: 30px; }
syntax HTML

<ul class="nav">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Download</a>
</li>
<li>
<a href="#">Tutorial</a>
</li>
<li>
<a href="#">Template</a>
</li>
<li>
<a href="#">Contact Us</a>
</li>
<li>
<a href="#">Other</a>
</li>
</ul>

untuk Demonya dibawah ini

See the Pen CSS effect background sliding on hover by Budi Setiawan (@bizanniusz) on CodePen.

0 Comments

Jika ada pertanyaan seputar artikel limcoding jangan sungkan untuk bertanya