こんにちは、福田です。
このまえ仕事でhoverアクションで矢印が動くボタンを作ったので、CSSを共有いたします(^^)/
こんな感じで動きます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nextボタンサンプル</title>
<style>
.container {
width: 200px;
margin: 0 auto;
padding: 100px;
background-color: white;
}
a {
text-decoration: none;
}
.yazirusi {
width: 50px;
margin: 0px 10px;
right: -40px;
top: 25px;
position: absolute;
}
.yazirusi .line01 {
height: 0.3px;
background-color: green;
}
.yazirusi .line02 {
position: absolute;
top: 0;
right: 0;
transform-origin: right bottom;
width: 6px;
height: 0.3px;
background-color: green;
transform: rotate(45deg);
}
.next-btn {
color: green;
border: 1px solid green;
display: flex;
flex: 0 0 auto;
justify-content: center;
padding: 14px;
position: relative;
}
.next-btn .next-btn-txt {
color: green;
}
.next-btn:hover {
background: green;
transition: .5s;
}
.next-btn:hover .next-btn-txt {
transform: translateX(-60px);
color: white;
transition: .5s;
}
.next-btn:hover .yazirusi {
transform: translateX(-60px);
transition: .5s;
}
.next-btn:hover .yazirusi .line01 {
background-color: white;
}
.next-btn:hover .yazirusi .line02 {
background-color: white;
}
</style>
</head>
<body>
<div class="container">
<a href="view.html">
<div class="next-btn">
<div class="next-btn-txt">Next</div>
<div class="yazirusi">
<div class="line01"></div>
<div class="line02"></div>
</div>
</div>
</a>
</div>
</body>
</html>`transition` を使って、hover時の動きをゆっくり表現するのは、いろいろ応用できそうですね！
