コンテンツのタイトル部分をクリックすると、更なる詳細ページに飛ばすようなときに使用するため作成したhoverエフェクトです。（１）は、hover で右にスライドしながら背面を青色に塗りつぶします。（２）は、（１）の逆で、青色の背面を右にスライドしながら白色に塗りつぶします。
htmlソース
<button class="btn btn-2 hover-slide-right">
<span> hoverで右スライドするタイトル 1</span>
</button>
<button class="btn btn-1 hover-filled-slide-right">
<span> hoverで右スライドするタイトル 2</span>
</button>
cssソース
::before,
::after {
position: absolute;
content: "";
}
.btn {
position: relative;
display: inline-block;
width: auto; height: auto;
background-color: transparent;
border: none;
cursor: pointer;
margin: 0 25px 0 15px;
min-width: 450px;
}
.btn span {
position: relative;
display: inline-block;
font-size: 18px;
font-weight: 400;
letter-spacing: 1.5px;
text-align:left;
top: 0;
left: 0;
width: 100%;
padding: 11px 0;
transition: 0.3s;
}
.btn-1::before {
background-color: #48f;
transition: 0.3s ease-out;
}
.btn-1 span {
color: #fff;
border-bottom: 1px solid #48f;
border-left: 6px solid #48f;
transition: 0.2s 0.1s;
}
.btn-1 span:hover {
color: #555;
transition: 0.2s 0.1s;
}
.btn-2::before {
background-color: #48f;
transition: 0.3s ease-out;
}
.btn-2 span {
color: #555;
border-bottom: 1px solid #48f;
border-left: 6px solid #48f;
transition: 0.2s;
}
.btn-2 span:hover {
color: #fff;
border-left: 6px solid #48f;
transition: 0.2s 0.1s;
}
.btn.hover-filled-slide-right::before {
top:0; bottom: 0; right: 0;
height: 100%; width: 100%;
}
.btn.hover-filled-slide-right:hover::before {
width: 0%;
}
.btn.hover-slide-right::before {
top: 0; bottom: 0; left: 0;
height: 100%; width: 0%;
}
.btn.hover-slide-right:hover::before {
width: 100%;
}
