Top

メモ書き

css

【css】ロールオーバーで端がめくれるボタンアニメーションの実装方法！

  • CSS
  • HTML
  • アニメーション

2023.11.25

今回はロールオーバーのボタンアニメーションをご紹介します。

この記事を実装できるボタンはこちら。demo
今回紹介するボタンデザインは実際の制作であったデザインで、「背景を透かせる」「ボタンが置かれる箇所の背景も透過になるグラデーション」というような状況でした。
これがまた厄介。単色の背景の上にあるボタンだったらめくれるところをなんとか誤魔化せたりするのに、きちんと透過させなければいけないというのが難点でした。
なんとか形にはなったので備忘録として残しておきます。
ちなみにdemoページの背景色をグラデーションにする方法はこちらを参考にどうぞ。
【css】背景色(background)を2色(複数色)に指定する方法

マウスオーバーで端がめくれるボタンアニメーションの実装

まずはHTMLから。

<div class="btn"><a href="#">記事ページに戻ります</a></div>

ここは単純ですね。メインとなるCSSはこちら。

.btn {
    a {
        color: #5C68D1;
        line-height: 1.2;
        letter-spacing: .1rem;
        position: relative;
        overflow: hidden;
        text-align: center;
        clip-path: polygon(100% 0, 100% 100%, 100% 100%, 0 100%, 0 0);
        -webkit-transition: all .3s ease;
        -moz-transition: all .3s ease;
        -o-transition: all .3s ease;
        transition: all .3s ease;
        
        &::before {
            content: "";
            display: block;
            position: absolute;
            background-color: #5C68D1;
            top: 0;
            left: 0;
        }
        
        &:after {
            position: absolute;
            content: '';
            bottom: -.08vw;
            right: -.08vw;
            width: 0vw;
            height: 0vw;
            border: 0px solid #5C68D1;
            border-bottom-color: rgba($color: #5C68D1, $alpha: 0);
            border-right-color: rgba($color: #5C68D1, $alpha: 0);
            background-color: rgba($color: #5C68D1, $alpha: 0);
            overflow: hidden;
            -webkit-transition: all .3s ease;
            -moz-transition: all .3s ease;
            -o-transition: all .3s ease;
            transition: all .3s ease;
        }
    }
}


// ====== PC ======
@media print,screen and (min-width:769px) {
    .btn {
        a {
            font-size: 1.25rem;
            width: 28.515625vw;
            padding-top: 1.328125vw;
            padding-bottom: 1.328125vw;
            border: 0.08vw solid #5c68d1;

            &::before {
                width: 28.515625vw;
                height: 4.546875vw;
                clip-path: polygon(100% 68%, 95% 100%, 100% 100%);
            }

            &:hover {
                opacity: 1;
                background-color: rgba($color: #5C68D1, $alpha: 0.17);
                clip-path: polygon(100% 0, 100% 71%, 95.2% 100%, 0 100%, 0 0);

                &:after {
                    border-width: .7vw;  
                }
            }
        }
    }
}

長いですねー笑
ちょっと前に作ったボタンなため、細かいところは忘れてしまって詳細な解説はできないのですが、、
ボタンの背景のことも考えるがために、clip-pathを使用しています。
このプロパティは全体の％で指定しているので、高さや幅が変わるだけでズレが出てしまいます。
このプロパティを使うときはこのサイトが便利ですよー。clip-path maker

ちなみに色を変更したいときは下記コードのみで変更できます。

.btn {
    a {
        color: #F04A00;
        border-color: #F04A00;

        &::before {
            background-color: #F04A00;
        }
        &::after {
            border-color: #F04A00;
        }
        &:hover {
            background-color: rgba($color: #F04A00, $alpha: 0.17);
        }
    }
}

サイズを変える場合は各所調整が必要となる書き方でちょっと申し訳なさあります。。
こっちほうが簡単ですよなどありましたら、ぜひ教えてください！
改善求む。

関連記事

一覧に戻る