LoginSignup
7
7

More than 5 years have passed since last update.

@tnakagawa

divタグのボタンにcssで動きをつける

Posted at

はじめに

Webサイトにある最近のボタンってカーソルをあてると、色が変わったりしますよね？
あれって、私ははじめJavascriptで実装しているものだと思っていましたが、
ある時、CSSの仕様を見てたら、「transition」なんてものが！？

実装

まずは、下のHTMLをファイルに貼り付けて、ブラウザで表示してみてください。
新しいブラウザだと、左に色付きのボタンが縦に並んでいて、
その右に、灰色のボタンが縦に並んでます。

右の灰色のボタンに、カーソルを当てると、いろいろな動きをしてボタンの色が変わるはずです。

※：灰色以外のボタン色は、Excelの色合いを真似ています。

divbtn.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Div Button</title>
    </head>
    <style>
        * {
            font-family: Arial;
            font-size: 16px;
        }
        .basebluebtn {
            position: relative;
            width: 200px;
            height: 50px;
            border: 3px solid #385D8A;
            background-color: #4F81BD;
            color: white;
            text-align: center;
            line-height: 50px;
            border-radius: 10px;
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            cursor: pointer;
            z-index: 1;
            overflow: hidden;
        }
        .baseredbtn {
            position: relative;
            width: 200px;
            height: 50px;
            border: 3px solid #8C3836;
            background-color: #C0504D;
            color: white;
            text-align: center;
            line-height: 50px;
            border-radius: 10px;
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            cursor: pointer;
            z-index: 1;
            overflow: hidden;
        }
        .basegreenbtn {
            position: relative;
            width: 200px;
            height: 50px;
            border: 3px solid #71893F;
            background-color: #9BBB59;
            color: white;
            text-align: center;
            line-height: 50px;
            border-radius: 10px;
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            cursor: pointer;
            z-index: 1;
            overflow: hidden;
        }
        .basepurplebtn {
            position: relative;
            width: 200px;
            height: 50px;
            border: 3px solid #5C4776;
            background-color: #8064A2;
            color: white;
            text-align: center;
            line-height: 50px;
            border-radius: 10px;
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            cursor: pointer;
            z-index: 1;
            overflow: hidden;
        }
        .baseskybtn {
            position: relative;
            width: 200px;
            height: 50px;
            border: 3px solid #358091;
            background-color: #4BACC6;
            color: white;
            text-align: center;
            line-height: 50px;
            border-radius: 10px;
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            cursor: pointer;
            z-index: 1;
            overflow: hidden;
        }
        .baseorangebtn {
            position: relative;
            width: 200px;
            height: 50px;
            border: 3px solid #B66D31;
            background-color: #F79646;
            color: white;
            text-align: center;
            line-height: 50px;
            border-radius: 10px;
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            cursor: pointer;
            z-index: 1;
            overflow: hidden;
        }
        .basegraybtn {
            position: relative;
            width: 200px;
            height: 50px;
            border: 3px solid gray;
            background-color: darkgray;
            color: white;
            text-align: center;
            line-height: 50px;
            border-radius: 10px;
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            cursor: pointer;
            z-index: 1;
            overflow: hidden;
        }
        .bluebtn {
            position: relative;
            width: 200px;
            height: 50px;
            border: 3px solid gray;
            background-color: darkgray;
            color: white;
            text-align: center;
            line-height: 50px;
            border-radius: 10px;
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            cursor: pointer;
            z-index: 1;
            overflow: hidden;
            transition: all 0.5s;
        }
        .bluebtn::after {
            position: absolute;
            content: '';
            top: 0;
            left: 0;
            width: 0;
            height: 100%;
            background-color: #4F81BD;
            z-index: -1;
            transition: all 0.5s;
        }
        .bluebtn:hover {
            border: 3px solid #385D8A;
        }
        .bluebtn:hover::after {
            width: 100%;
        }
        .redbtn {
            position: relative;
            width: 200px;
            height: 50px;
            color: white;
            border: 3px solid gray;
            background-color: darkgray;
            text-align: center;
            line-height: 50px;
            border-radius: 10px;
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            cursor: pointer;
            z-index: 1;
            overflow: hidden;
            transition: all 0.5s;
        }
        .redbtn::after {
            position: absolute;
            content: '';
            top: 0;
            right: 0;
            width: 0;
            height: 100%;
            background-color: #C0504D;
            z-index: -1;
            transition: all 0.5s;
        }
        .redbtn:hover {
            border: 3px solid #8C3836;
        }
        .redbtn:hover::after {
            width: 100%;
        }
        .greenbtn {
            position: relative;
            width: 200px;
            height: 50px;
            border: 3px solid gray;
            background-color: darkgray;
            color: white;
            text-align: center;
            line-height: 50px;
            border-radius: 10px;
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            cursor: pointer;
            z-index: 1;
            overflow: hidden;
            transition: all 0.5s;
        }
        .greenbtn::after {
            position: absolute;
            content: '';
            bottom: 0;
            left: 0;
            width: 100%;
            height: 0;
            background-color: #9BBB59;
            z-index: -1;
            transition: all 0.5s;
        }
        .greenbtn:hover {
            border: 3px solid #71893F;
        }
        .greenbtn:hover::after {
            height: 100%;
        }
        .purplebtn {
            position: relative;
            width: 200px;
            height: 50px;
            border: 3px solid gray;
            background-color: darkgray;
            color: white;
            text-align: center;
            line-height: 50px;
            border-radius: 10px;
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            cursor: pointer;
            z-index: 1;
            overflow: hidden;
            transition: all 0.5s;
        }
        .purplebtn::after {
            position: absolute;
            content: '';
            top: 0;
            left: 0;
            width: 100%;
            height: 0;
            background-color: #8064A2;
            z-index: -1;
            transition: all 0.5s;
        }
        .purplebtn:hover {
            border: 3px solid #5C4776;
        }
        .purplebtn:hover::after {
            height: 100%;
        }
        .skybtn {
            position: relative;
            width: 200px;
            height: 50px;
            border: 3px solid gray;
            background-color: darkgray;
            color: white;
            text-align: center;
            line-height: 50px;
            border-radius: 10px;
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            cursor: pointer;
            z-index: 1;
            overflow: hidden;
            transition: all 0.5s;
        }
        .skybtn::after {
            position: absolute;
            content: '';
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #4BACC6;
            transform: rotateY(90deg);
            z-index: -1;
            transition: all 0.5s;
        }
        .skybtn:hover {
            border: 3px solid #358091;
        }
        .skybtn:hover::after {
            transform: rotateY(0deg);
        }
        .orangebtn {
            position: relative;
            width: 200px;
            height: 50px;
            border: 3px solid gray;
            background-color: darkgray;
            color: white;
            text-align: center;
            line-height: 50px;
            border-radius: 10px;
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            cursor: pointer;
            z-index: 1;
            overflow: hidden;
            transition: all 0.5s;
        }
        .orangebtn::after {
            position: absolute;
            content: '';
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #F79646;
            transform: rotateX(90deg);
            z-index: -1;
            transition: all 0.5s;
        }
        .orangebtn:hover {
            border: 3px solid #B66D31;
        }
        .orangebtn:hover::after {
            transform: rotateX(0deg);
        }
        .graybtn {
            position: relative;
            width: 200px;
            height: 50px;
            border: 3px solid gray;
            background-color: darkgray;
            color: white;
            text-align: center;
            line-height: 50px;
            border-radius: 10px;
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            cursor: pointer;
            z-index: 1;
            overflow: hidden;
        }
        .graybtn::after {
            position: absolute;
            content: '';
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            transition: all 0.5s;
            border-radius: 50%;
            border: 10px double white;
            margin: -10px 0 0 -10px;
            transform: scale(0, 0);
        }
        .graybtn:hover::after {
            transform: scale(2, 2);
        }
    </style>
    <body>
        <table>
            <tr>
                <td>
                    <div class="basebluebtn">BLUE BUTTON</div>
                    <br>
                    <div class="baseredbtn">RED BUTTON</div>
                    <br>
                    <div class="basegreenbtn">GREEN BUTTON</div>
                    <br>
                    <div class="basepurplebtn">PURPLE BUTTON</div>
                    <br>
                    <div class="baseskybtn">SKY BUTTON</div>
                    <br>
                    <div class="baseorangebtn">ORANGE BUTTON</div>
                    <br>
                    <div class="basegraybtn">GRAY BUTTON</div>
                </td>
                <td>
                    <div class="bluebtn">BLUE BUTTON</div>
                    <br>
                    <div class="redbtn">RED BUTTON</div>
                    <br>
                    <div class="greenbtn">GREEN BUTTON</div>
                    <br>
                    <div class="purplebtn">PURPLE BUTTON</div>
                    <br>
                    <div class="skybtn">SKY BUTTON</div>
                    <br>
                    <div class="orangebtn">ORANGE BUTTON</div>
                    <br>
                    <div class="graybtn">GRAY BUTTON</div>
                </td>
            </tr>
        </table>
    </body>
</html>

解説

動き
基本的に、「xxxbtn」に対し、after擬似要素「xxxbtn::after」を背景として、設定しており。
最初は、背景が見えない（幅を0にしていたり、背景を回転していたり）ようにしておき、カーソルが乗った時に、「xxxbtn:hover」「xxxbtn:hover::after」によって変更します。
それを、CSSの「transition: all 0.5s;」で0.5秒かけて変化するようにしてます。

背景
after擬似要素を背景としているのは、「z-index」でマイナス値「-1」に設定することで実現しています。親要素には、明示的に「1」を設定しています。
そして、ぴったりと背景を合わせる為に、本要素に「position: relative;」、after擬似要素に「position: absolute;」を設定し、「top，left，right，bottom」の配置位置で固定することにより実現しています。
また、背景の方が大きい為、本要素に「overflow: hidden;」をつけて、はみ出ても表示されないようにしています。

背景表示
青色のボタンは、左→右に色が現れます。
これは、「top: 0;」「left: 0;」で左上に起点を置き、「width: 0;」から「width: 100%;」まで変化させる事により実現しています。

赤色のボタンは、右→左に色が現れます。
同様に、「top: 0;」「right: 0;」で右上に起点を置き、「width: 0;」から「width: 100%;」まで変化させる事により実現しています。

緑色のボタンは、下→上に色が現れます。
同様に、「bottom: 0;」「left: 0;」で左下に起点を置き、「height: 0;」から「height: 100%;」まで変化させる事により実現しています。

紫色のボタンは、上→下に色が現れます。
同様に、「top: 0;」「left: 0;」で左下に起点を置き、「height: 0;」から「height: 100%;」まで変化させる事により実現しています。

空色のボタンは、真ん中から左右に色が現れます。
これは、「transform: rotateY(90deg);」でY軸に対して90度回転させておき、「transform: rotateY(0deg);」により、0度まで変化させる事により実現しています。

橙色のボタンは、真ん中から上下に色が現れます。
これは、「transform: rotateX(90deg);」でX軸に対して90度回転させておき、「transform: rotateX(0deg);」により、0度まで変化させる事により実現しています。

その他
ボタンなので、選択出来ないように「-moz-user-select: none;」「-webkit-user-select: none;」「-ms-user-select: none;」を設定してあります。
※：はやく「user-select」が標準になって欲しい・・・

また、カーソルを「cursor: pointer;」としています。

おわりに

いろいろと調べてみると、もっと凄い技で実現しているサイトが多々あるので、この記事がどこまで参考になるかは不明ですが、まずは簡易的に試すのには十分なんではないかと思っています。
参考になれば幸いです。

7
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
7
7