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