ホバーアニメーションボタン

2021-02-09

categorys:HTML/CSS

　　　Tag:コーディング | ボタン

今回は前回左右に幕が開くボタンを作成しました。今回はもう少し補足というかもう少し詳しく説明できたらと思います。

今回はマウスが上に来たら変化する状態を、色が変わるだけのプレーンなボタンと、昨日の左右に幕が開くボタン、上下に開くボタン、上から下まで動くボタンをご紹介します。

ホバーでゆっくり変化

基本ボタン

ボタンにホバーすればゆっくりとグレーのボタンが白に変わります。
ではコードの確認をしてみましょう。

-HTML-

<a class="btn_base" href="#">基本ボタン</a>

HTMLに関してはclass名が変わるぐらいで特に必要な作業はありません。
前回同様にスタイル変更のみでボタンのホバーアクションが変わるようになっています。

-CSS-

    .btn_base {        
        display: block;
        width: 200px;
        height: 60px;
        text-align: center;
        font-weight: bold;
        text-decoration: none;
        background-color: #666;
        border: 2px solid #666;
        border-radius: 5px;
        color: #fff;
        transition: all .5s;
    }
    .btn_base:hover {
        background-color: #fff;
        border-color: #319981;
        color: #319981;
    }

display: block;
width: 200px;
height: 60px;

まずaタグにクラスをつけるので、いくらボタンの幅や高さを指定してやってもインライン要素なので変わりません。なのでブロック要素に変更してやって、ボタンの高さと幅を指定してやる必要があるのでdisplay: block;としています。

text-align: center;
font-weight: bold;
text-decoration: none;

次に挙げたこの3つは文字をデザインしています。ボタンの文字の均等割りをtext-alignで行い、font-weightで文字を太くします。
そしてtext-decoration: none；でテキストリンクの下線を消す処理をします。

background-color: #666;
border: 2px solid #666;
border-radius: 5px;
color: #fff;

ここではボタンのデザインを行っています。background-colorでボタンの色をつけています。
border: 2px solid #666;は2pxの太さで線を#666の色で塗る。という指定になっています。#666は#666666と同じ色です。簡単な色を使う時などは3桁で表すことが多いです。grayなど文字であらわすことも出来ます。

border-radiusはボタンの淵を滑らかなR曲線を描くようにします。
colorは文字の色になっています。
最後のtransition: all .5sが動きはすべて0.5秒掛けて動くようにしています。

以上が通常時のボタンの状態を決めるスタイルとなります。

マウスが上に来ると

.btn_base:hover　疑似クラスの:hoverで指定しています。マウスが上に来た時の処理を記入していきます。

ココでは基本的に色を変えるだけですので上記で色の指定をしていた場所の色を変更して記載します。

background-color: #fff;
border: 2px solid #319981;
color: #319981;

背景を白（#fff）にし、枠と文字をグリーン（#319981）に変更しました。

以上が本当に基本のボタン構造の詳しい説明でした。

応用編

では昨日の幕を開くようなボタンの応用編をいくつかご紹介します。

行う作業としては

疑似要素のbefor、aferを使用して幕を2枚作る
幕の始点サイズを決める
幕の終点サイズを決める

疑似要素を使用しなくても出来ますが、使う事によって簡単にスマートに仕上げる事が出来ます。
幕の始点サイズは通常時のサイズ、終点サイズは幕が掃けた状態を指定します。

これで始点から終点に向けて0.5秒掛けて動くようになります。
幕の動きや枚数についてのサンプル例を作りました。

横幕ボタン 縦幕ボタン 幕ボタン

いかがでしょうか動きはこんな感じになりますので、スタイル部を見てみましょう。

-横幕-

/*背景カラーが左右に分かれていく*/
.btn_maku,.btn_maku::before,.btn_maku::after {
    transition: all .5s;
}
.btn_maku {        
    position: relative;
    display: inline-block;
    width: 200px;
    height: 60px;
    text-align: center;
    text-decoration: none;
    z-index: 2;
    background-color: #666;
    border: 2px solid #666;
    border-radius: 5px;
    color: #fff;
}
.btn_maku::before,.btn_maku::after {
    display: block;
    position: absolute;
    content: '';
    top: 0;
    width: 50%;
    height: 100%;
    z-index: -1;
}
.btn_maku::before {right: 0;}
.btn_maku::after {left: 0;}
.btn_maku:hover {
    background-color: #fff;
    border-color: #319981;
    color: #319981;
}
.btn_maku:hover::before,.btn_maku:hover::after {
    width: 0;
    background-color: #319981;
}

-縦幕-

/*背景カラーが上下に分かれていく*/
.btn_maku2,.btn_maku2::before,.btn_maku2::after {
    transition: all .5s;
}
.btn_maku2{        
    position: relative;
    display: inline-block;
    width: 200px;
    height: 60px;
    text-align: center;
    text-decoration: none;
    z-index: 2;
    background-color: #666;
    border: 2px solid #666;
    border-radius: 5px;
    color: #fff;
}
.btn_maku2::before,.btn_maku2::after {
    display: block;
    position: absolute;
    content: '';
    left: 0;
    width: 100%;
    height: 50%;
    z-index: -1;
}
.btn_maku2::before{top: 0;}
.btn_maku2::after{bottom: 0;}
.btn_maku2:hover{
    background-color: #fff;
    border-color: #319981;
    color: #319981;
}
.btn_maku2:hover::before,.btn_maku2:hover::after {
    height: 0;
    background-color: #319981;
}

-縦1枚幕-

/*シャッター*/
.btn_shut,.btn_shut::after {
    transition: all .5s;
}
.btn_shut{        
    position: relative;
    display: inline-block;
    width: 200px;
    height: 60px;
    text-align: center;
    text-decoration: none;
    z-index: 2;
    background-color: #666;
    border: 2px solid #666;
    border-radius: 5px;
    color: #fff;
}
.btn_shut::after {
    display: block;
    position: absolute;
    content: '';
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.btn_shut::after{bottom: 0;}
.btn_shut:hover{
    background-color: #fff;
    border-color: #319981;
    color: #319981;
}
.btn_shut:hover::after {
    height: 0;
    background-color: #319981;
}

それぞれのコードを見てわかるように始点と終点(hover)の状態を変えて実現していますが、ここでも少し変わった命令が出てきました。

position: relative;　position: absolute;についてはこれも非常に大切なコードとなりますので改めて記事にしたいと思います。

content: ‘ ‘;はbefor,afterを使用する際に内容が無いと表示しないというルールがあるので空白を指定してやることで色の表示が出来るというものです。

z-indexは重なりの順番を指定しています。befor、afterと言っても元のスタイルの上と下に来るわけではなく、すべて上に乗っかっていくので元のボタンの下側に幕を入れるようにしています。

まとめ

疑似要素さまさまですね♪これでまたさらに疑似要素の重要性が伝わったら嬉しいのですが、いかがでしょうか？そしてまた新たにposishonが出てきました。
こちらを使用することによって表示する場所の指定が出来て、また一段階デザインできる幅が広がると思うのでまた次回

back no

/nao120i

/nao120i

MENU

fotodeo

/nao120i