Ryo Blog

〜WEB制作をスキルに〜

ホバーしたらボタンが右にズレるようなアニメーション

2023.11.09

こんなことを説明しています！

transformの使い方
回転して作る矢印の作成方法

解説動画

コードの解説

HTMLの記述

</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": ""
},

記事一覧へ

りょー｜29歳フリーランス｜LPコーディング、WordPressサイト構築、ディレクション、Shopify (Liquid編集) を中心に活動しております！

完全未経験からWEB業界に入り
デイトラで3ヶ月間学習
営業開始後4日→ゼロイチ達成
開業3ヶ月後→月収50万達成
その後平均月収50万 (最高月収120万円)

WEBで独立したい！未経験からでもフリーランスになりたい！そんな方々のためになるような情報をこのブログを通して発信します！

私がWEB制作フリーランスとして独立するために学習したオンラインスクール「デイトラ」の詳細リンクはこちら↓↓

Products

Coming Soon

HP制作のご依頼

現在エンドクライアント様向けの事業サイトを作成中です。

WEB制作業務委託
のご依頼

LPコーディング、WordPress構築、Shopify構築、Liquid編集業務承ります！約1年間で80サイト以上作成をしてきました。LP制作最短2日で納品！
詳しくは、ポートフォリオをご覧ください。

コンテンツ

Ryo'Portfolio裏側徹底解説、レスポンシブほぼ不要のコーディング方法、実務必須のやや難しい実装解説、見積もりからコーディング、納品までの最初から最後まで全部見せます解説動画、等々「学習終わったけど実務が不安」という人に向けた「実務のお守り」のようなコンテンツを現在作成中です。

カートにアイテムが追加されました