ホバーしたらボタンが右にズレるようなアニメーション
Share
こんなことを説明しています!
- transformの使い方
- 回転して作る矢印の作成方法
解説動画
コードの解説
HTMLの記述
<div class="link-wrap">
<a class="link" href="">View more</a>
</div>
ポイント
私はボタンなどのリンクを作るときは <a>タグを<div>で囲って link-wrap クラスで中央寄せや右寄せなどができるようにしています!
CSSの記述
.link-wrap {
text-align: center;
}
.link {
display: inline-block;
padding: 20px 60px 20px 0; //
position: relative;
//丸
&::before {
content: '';
position: absolute;
width: 40px;
height: auto;
aspect-ratio: 1;
border: 1px solid #000;
border-radius: 50%;
//配置 ※ paddingも含めた位置
top: 50%;
transform: translateY(-50%);
right: 0;
transition: all 0.3s ease;
}
//矢印
&::after {
content: '';
position: absolute;
width: 10px;
height: auto;
aspect-ratio: 1;
border-right: 1.5px solid #000;
border-bottom: 1.5px solid #000;
//配置, 回転 ※ paddingも含めた位置
top: 50%;
transform: translateY(-50%) rotate(-45deg);
right: 16px;
transition: all 0.3s ease;
}
&:hover {
&::before {
transform: translate(8px, -50%);
}
&::after {
transform: translate(8px, -50%) rotate(-45deg);
}
}
}
手順① <a>タグに余白を作る
▶︎ 余白の設定をするために <a> タグを inline-block 要素に指定
▶︎ <a>タグの外 (ボタンの部分) をホバーしても反応するように、<a> タグに余白 [ padding ] をつける
手順② 擬似要素 [ ::before ] で丸を作る
▶︎絶対配置 [ position : absolute ] で指定。paddingを含めた位置設定になるので注意
手順③ 擬似要素 [ ::after ] で矢印を作る
▶︎ 四角形を作り、右と下だけ枠線を作り、それを45°右回りに回転させる
▶︎ 縦中央揃えなので [ top: 50%; transform : translateY( -50% ); を指定
▶︎ 回転させるために [ transform : rotate( -45deg ); ] を指定
▶︎ transformプロパティは 1つにまとめて書く! しかも、translate → rotate の順番で書かないと css は当たらない
手順④ ホバーしたときの動作を書く
▶︎ transformの書き方注意! translateXとtranslateYもまとめて書く!
解説で使用したスニペット
scss.json
"before-circ": {
"prefix": "before-circ",
"body": [
"&::before {",
" content: '';",
" position: absolute;",
" width: $1;",
" height: auto;",
" aspect-ratio: 1;",
" border: 1px solid $2;",
" border-radius: 50%;",
" //配置",
" $3",
"}",
],
"description": "擬似要素で円を作る"
},
"after-arrow": {
"prefix": "after-arrow",
"body": [
"&::after {",
" content: '';",
" position: absolute;",
" width: $1;",
" height: auto;",
" aspect-ratio: 1;",
" border-right: $2px solid $3;",
" border-bottom: $2px solid $3;",
" //配置, 回転",
" $5",
"}",
],
"description": "擬似要素で矢印を作る"
},
"top50": {
"prefix": "top-50%",
"body": [
"top: 50%;",
"transform: translateY(-50%);",
],
"description": "縦中央揃え"
},
"transformX": {
"prefix": "tx",
"body": [
"transform: translateX($1);",
],
"description": ""
},
"transformY": {
"prefix": "ty",
"body": [
"transform: translateY($1);",
],
"description": ""
},
"transformXY": {
"prefix": "txy",
"body": [
"transform: translate($1, $2);",
],
"description": ""
},
"transition": {
"prefix": "transition-0.3",
"body": [
"transition: all 0.3s ease;",
],
"description": ""
},