Slide Background Item
ホバーで背景色が左からスライドするリストアイテム。
HTML
<div class="sb-list"> <a href="javascript:void(0)" class="sb-item">Overview</a> <a href="javascript:void(0)" class="sb-item">Features</a> <a href="javascript:void(0)" class="sb-item">Integrations</a> </div>
CSS
.sb-list {
display: flex;
flex-direction: column;
gap: 2px;
width: 180px;
}
.sb-item {
position: relative;
padding: 10px 14px;
font-size: 14px;
font-weight: 500;
color: #666;
text-decoration: none;
border-radius: 8px;
overflow: hidden;
z-index: 0;
transition: color .25s;
}
.sb-item::before {
content: '';
position: absolute;
inset: 0;
background: #f5f5f5;
transform: translateX(-101%);
transition: transform .3s cubic-bezier(.4,0,.2,1);
z-index: -1;
border-radius: 8px;
}
.sb-item:hover { color: #1a1a1a; }
.sb-item:hover::before { transform: translateX(0); }