ホバー時に背景が左からスライド
ホバー時に背景が左からスライドする表現方法。
Source Code
右上の「コピー」からご利用ください。
コピー
<a class="my-parts" href="#">テキスト</a>コピー
.my-parts {
display: inline-block;
background-image: linear-gradient(to right, rgba(0,0,0,0) 50%, #F44336 50%);
background-position: 0 0;
background-size: 200% auto;
transition: all .3s ease 0s;
text-decoration: none;
}
.my-parts:hover {
cursor: pointer;
background-position: -100% 0;
color: #fff;
}
