コピペで簡単実装OK! ホバーアニメーションボタン集 │ ブレーンアシストオンライン

1. コピペでOK! ホバーアニメーション集

コピペでOK! ホバーアニメーション集

今回のBAオンラインはコピペで簡単に実装できるホバーアニメーション集です！
個人的にコーディング作業の中で一番好きなのがこのホバー時のアニメーションだったりします。
一見シンプルなサイトでもぐっと華やかになるのが楽しいところです。

今回はこのホバー時の効果をつけたボタンをいろいろ作ってみました！
ぜひご利用ください♪

作成時のルール

①サイズはwidth100px、高さ3em
②使用する色は白～黒のモノトーンのみ
③HTML5/CSS3のみ使用
④HTMLタグはすべて共通（クラス名のみ変更）

カラー反転

sample

シンプルな反転

after要素の矢印を変えると雰囲気変わります。

コードを見る

HTML

                     
       <div class="btn__ btn_reverse_01">
         <a href=""><span class="text">sample</span></a>
       </div>

CSS

                        
.btn__{
   display: block;
   margin: 25px auto;
   border-radius: 5px;
}       
.btn__ a{
    display: block;
    width: 100px;
    padding: 1em 3em;
    text-align: center;
    color: #333;
    background-color: #FFF;
    border: 3px solid #333;   
    border-radius: 5px;
    font-weight: bold;   
}       
       
.btn_reverse_01{
    transition: 0.5s;
}
.btn_reverse_01 a{
    position: relative;
    transition: 0.5s;
}
.btn_reverse_01 a::after{
    position: absolute;
    content: '➡';
    width: 1em;
    height: 1em;
    left: 1em;
    top: calc(50% - 0.5em);
    line-height: 1em;
    opacity: 0;
    transition: color 0s, transform 0.5s;
}
@media (hover: hover) {

    .btn_reverse_01:hover a{
        background-color: #333;
        color: #FFF;
    }
    .btn_reverse_01:hover a::after{
        opacity: 1;
        transform: rotate(720deg);
        transform-origin: 50% 50%;
    }
}
@media (hover: none) {

    .btn_reverse_01:active a{
        color: #FFF;
    }
    .btn_reverse_01:active a::after{
        opacity: 1;
        transform: rotate(720deg);
        transform-origin: 50% 50%;
    }
}

sample

真ん中から円がぽわっと広がるアニメーション

コードを見る

HTML

                     
       <div class="btn__ btn_reverse_02">
         <a href=""><span class="text">sample</span></a>
       </div>

CSS

                        
.btn__{
   display: block;
   margin: 25px auto;
   border-radius: 5px;
}       
.btn__ a{
    display: block;
    width: 100px;
    padding: 1em 3em;
    text-align: center;
    color: #333;
    background-color: #FFF;
    border: 3px solid #333;   
    border-radius: 5px;
    font-weight: bold;   
}   
.btn_reverse_02 a{
    position: relative;
    overflow: hidden;
    transition: 0.5s;
}
.btn_reverse_02 .text{
    position: relative;
    z-index: 1;
}
.btn_reverse_02 a::before{
    content: '';
    position: absolute;
    width: 0px;
    height: 0px;
    aspect-ratio: 1/1;
    background-color: #000;
    border-radius: 50%;
    transform: translateX(-50%);
    left: 50%;
    top: 50%;
    z-index: 1;
}
@media (hover: hover) {
    .btn_reverse_02:hover a::before{
        width: auto;
        height: 500%;
        top: -200%;
        left: 50%;
        opacity: 0;
        transition: 0.5s ease-in;
    }
    .btn_reverse_02:hover a{
        color: #FFF;
        background-color: #333;
        transition: color 0s, background-color 0.5s;
        transition-delay: 0.3s;
    }
}
@media (hover: none) {
    .btn_reverse_02:active a::before{
        width: auto;
        height: 500%;
        top: -200%;
        left: 50%;
        opacity: 0;
        transition: 0.5s ease-in;
    }
    .btn_reverse_02:active a{
        color: #FFF;
        background-color: #333;
        transition: color 0s, background-color 0.5s;
        transition-delay: 0.3s;
    }
}

sample

↑とは逆に外側から反転

コードを見る

HTML

                     
       <div class="btn__ btn_reverse_03">
         <a href=""><span class="text">sample</span></a>
       </div>

CSS

                        
.btn__{
   display: block;
   margin: 25px auto;
   border-radius: 5px;
}       
.btn__ a{
    display: block;
    width: 100px;
    padding: 1em 3em;
    text-align: center;
    color: #333;
    background-color: #FFF;
    border: 3px solid #333;   
    border-radius: 5px;
    font-weight: bold;   
}  

.btn_reverse_03 a{
    position: relative;
    overflow: hidden;
    transition: 0.5s;
}
.btn_reverse_03 .text{
    position: relative;
    z-index: 1;
}
.btn_reverse_03 a::before{
    content: '';
    position: absolute;
    width: 150%;
    height: auto;
    aspect-ratio: 1/1;
    background-color: #FFF;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    z-index: 1;
    transition: 0.6s ease-in;
}
@media (hover: hover) {
    .btn_reverse_03:hover a::before{
        width: 0;
        height: auto;
        opacity: 0;
    }
    .btn_reverse_03:hover a{
        color: #FFF;
        background-color: #333;
        transition: color 0s, background-color 0.5s;
        transition-delay: 0.3s;
    }
}
@media (hover: none) {
    .btn_reverse_03:active a::before{
        width: auto;
        height: 500%;
        top: -200%;
        left: 50%;
        opacity: 0;
        transition: 0.5s ease-in;
    }
    .btn_reverse_03:active a{
        color: #FFF;
        background-color: #333;
        transition: 0.8s;
    }
}

sample

シンプルにスライドして反転

transitionをhover,active要素のみにつけるとマウスを離した時の挙動が変わります。

コードを見る

HTML

                     
       <div class="btn__ btn_reverse_04">
         <a href=""><span class="text">sample</span></a>
       </div>

CSS

                        
.btn__{
    display: block;
    margin: 25px auto;
    border-radius: 5px;
}

.btn__ a{
    display: block;
    width: 100px;
    padding: 1em 3em;
    text-align: center;
    color: #333;
    background-color: #FFF;
    border: 3px solid #333;
    border-radius: 5px;
    font-weight: bold;
}

.btn_reverse_04 a{
    position: relative;
}
.btn_reverse_04 .text{
    position: relative;
    z-index: 1;
    transition: 0.5s;
}
.btn_reverse_04 a::before{
    content: '';
    position: absolute;
    top: 0;
    left: auto;
    right: 0;
    width: 0;
    height: 100%;
    background-color: #333;
    transition: 0.5s;
    z-index: 1;
}
@media (hover: hover) {
    .btn_reverse_04 a:hover{
        color: #FFF;
    }
    .btn_reverse_04 a:hover::before{
        width: 100%;
        left: 0;
        right: auto;
    }
}
@media (hover: none) {
    .btn_reverse_04 a:active{
        color: #FFF;
    }
    .btn_reverse_04 a:active::before{
        width: 100%;
        left: 0;
        right: auto;
    }
}

sample

↑の上下バージョン

コードを見る

HTML

                     
       <div class="btn__ btn_reverse_05">
         <a href=""><span class="text">sample</span></a>
       </div>

CSS

                        
.btn__{
    display: block;
    margin: 25px auto;
    border-radius: 5px;
}

.btn__ a{
    display: block;
    width: 100px;
    padding: 1em 3em;
    text-align: center;
    color: #333;
    background-color: #FFF;
    border: 3px solid #333;
    border-radius: 5px;
    font-weight: bold;
}

.btn_reverse_05 a{
    position: relative;
}
.btn_reverse_05 .text{
    position: relative;
    z-index: 1;
    transition: 0.5s;
}
.btn_reverse_05 a::before{
    content: '';
    position: absolute;
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background-color: #333;
    transition: 0.5s;
    z-index: 1;
}
@media (hover: hover) {
    .btn_reverse_05 a:hover{
        color: #FFF;
    }
    .btn_reverse_05 a:hover::before{
        height: 100%;
        top:0;
        bottom: auto;
    }
}
@media (hover: none) {
    .btn_reverse_05 a:active{
        color: #FFF;
    }
    .btn_reverse_05 a:active::before{
        height: 100%;
        top:0;
        bottom: auto;
    }
}

sample

真ん中からすぱっと広がるタイプ

コードを見る

HTML

                     
       <div class="btn__ btn_reverse_06">
         <a href=""><span class="text">sample</span></a>
       </div>

CSS

                        
.btn__{
    display: block;
    margin: 25px auto;
    border-radius: 5px;
}

.btn__ a{
    display: block;
    width: 100px;
    padding: 1em 3em;
    text-align: center;
    color: #333;
    background-color: #FFF;
    border: 3px solid #333;
    border-radius: 5px;
    font-weight: bold;
}
.btn_reverse_06 a{
    position: relative;
}
.btn_reverse_06 .text{
    position: relative;
    z-index: 1;
    transition: 0.5s;
}
.btn_reverse_06 a::before{
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 0;
    background-color: #FFF;
    transition: 0.5s;
    z-index: 1;
}
@media (hover: hover) {
    .btn_reverse_06 a:hover{
        color: #FFF;
    }
    .btn_reverse_06 a:hover::before{
        background-color: #333;
        height: 100%;
        top:0;
    }
}
@media (hover: none) {
    .btn_reverse_06 a:active{
        color: #FFF;
    }
    .btn_reverse_06 a:active::before{
        background-color: #333;
        height: 100%;
        top:0;
    }
}

sample

↑の左右バージョン

コードを見る

HTML

                     
       <div class="btn__ btn_reverse_07">
         <a href=""><span class="text">sample</span></a>
       </div>

CSS

                        
.btn__{
    display: block;
    margin: 25px auto;
    border-radius: 5px;
}

.btn__ a{
    display: block;
    width: 100px;
    padding: 1em 3em;
    text-align: center;
    color: #333;
    background-color: #FFF;
    border: 3px solid #333;
    border-radius: 5px;
    font-weight: bold;
} 
.btn_reverse_07 a{
    position: relative;
}
.btn_reverse_07 .text{
    position: relative;
    z-index: 1;
    transition: 0.5s;
}
.btn_reverse_07 a::before{
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 100%;
    background-color: #FFF;
    transition: 0.5s;
    z-index: 1;
}
@media (hover: hover) {
    .btn_reverse_07 a:hover{
        color: #FFF;
    }
    .btn_reverse_07 a:hover::before{
        background-color: #333;
        width: 100%;
        left: 0;
        bottom: auto;
    }
}
@media (hover: none) {
    .btn_reverse_07 a:active{
        color: #FFF;
    }
    .btn_reverse_07 a:active::before{
        background-color: #333;
        width: 100%;
        left: 0;
        bottom: auto;
    }
}

ムーブ系

sample

ふわっと浮き上がるボタン

コードを見る

HTML

                     
<div class="btn__ btn_move_01">
  <a href=""><span class="text">sample</span></a>
</div>

CSS

                        
.btn__{
    display: block;
    margin: 25px auto;
    border-radius: 5px;
}

.btn__ a{
    display: block;
    width: 100px;
    padding: 1em 3em;
    text-align: center;
    color: #333;
    background-color: #FFF;
    border: 3px solid #333;
    border-radius: 5px;
    font-weight: bold;
}   
.btn_move_01 a{
    transition: 0.3s;
}

@media (hover: hover) {
    .btn_move_01 a:hover{
        transform: translateY(-10px);
        box-shadow: 0 7px 3px #666;
    }
}
@media (hover: none) {
    .btn_move_01 a:active{
        transform: translateY(-10px);
        box-shadow: 0 7px 3px #666;
    }
}

sample

沈むボタン

コードを見る

HTML

                     
<div class="btn__ btn_move_02">
  <a href=""><span class="text">sample</span></a>
</div>

CSS

                        
.btn__{
    display: block;
    margin: 25px auto;
    border-radius: 5px;
}

.btn__ a{
    display: block;
    width: 100px;
    padding: 1em 3em;
    text-align: center;
    color: #333;
    background-color: #FFF;
    border: 3px solid #333;
    border-radius: 5px;
    font-weight: bold;
}
.btn_move_02 a{
    transition: 0.3s;
}
@media (hover: hover) {
    .btn_move_02 a:hover{
        transform: translateY(3px);
        background-color: #ebebeb;
        border-right: 3px solid #797979;
        border-bottom: 3px solid #797979;
        box-shadow: inset 2px 2px 10px #d8d8d8,-1px -2px 1px #999;
    }
}
@media (hover: none) {
    .btn_move_02 a:active{
        transform: translateY(3px);
        box-shadow: inset 2px 2px 10px #d8d8d8,-1px -2px 2px #999;
    }
}

sample

くるっと回って別の文字が出るボタン

before要素の’CLICK!’を変更すると文字が変わります。

コードを見る

HTML

                     
<div class="btn__ btn_move_03">
  <a href=""><span class="text">sample</span></a>
</div>

CSS

                        
.btn__{
    display: block;
    margin: 25px auto;
    border-radius: 5px;
}

.btn__ a{
    display: block;
    width: 100px;
    padding: 1em 3em;
    text-align: center;
    color: #333;
    background-color: #FFF;
    border: 3px solid #333;
    border-radius: 5px;
    font-weight: bold;
}     
.btn_move_03 a{
    position: relative;
    transition: 0.5s;
}
.btn_move_03 a::before{
    content: 'CLICK!';
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    left: 0;
    line-height: 3.5em;
    background-color: #333;
    color: #FFF;
    border: 3px solid #333;
    opacity: 0;
    transition: 0.5s;
    transform: rotateY(-180deg);
}

@media (hover: hover) {
    .btn_move_03 a:hover .text{
        opacity: 0;
        transition: 0.3s;
    }
    .btn_move_03 a:hover::before{
        transform: rotateY(0);
        opacity: 1;
    }
}
@media (hover: none) {
    .btn_move_03 a:active .text{
        opacity: 0;
        transition: 0.3s;
    }
    .btn_move_03 a:active::before{
        transform: rotateY(0);
        opacity: 1;
    }
}

動物系

sample

わんこが出てくるボタン。

画像は200*180サイズを使用しています。

コードを見る

HTML

                     
<div class="btn__ btn_animal_01">
  <a href=""><span class="text">sample</span></a>
</div>

CSS

                        
.btn__{
    display: block;
    margin: 25px auto;
    border-radius: 5px;
}

.btn__ a{
    display: block;
    width: 100px;
    padding: 1em 3em;
    text-align: center;
    color: #333;
    background-color: #FFF;
    border: 3px solid #333;
    border-radius: 5px;
    font-weight: bold;
}  
.btn_animal_01 a{
    position: relative;
    transition: 0.5s;
}
.btn_animal_01 .text{
    display: block;
    padding: 0;
    margin: 0;
}
.btn_animal_01 a::after{
    position: absolute;
    content: '';
    background-image: url('pic_01.png');
    width: 80px;
    height: 100%;
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    bottom: 0;
    left: 5px;
    z-index: -5;
    transition: 0.5s;
}

@media (hover: hover) {
    .btn_animal_01:hover .text{
        transform: rotateX(360deg);
        transition: 0.5s;
    }
    .btn_animal_01:hover a::after{
        height: auto;
        aspect-ratio: 1/0.7;
        bottom: 100%;
    }
}
@media (hover: none) {
    .btn_animal_01:active .text{
        transform: rotateX(360deg);
        transition: 0.5s;
    }
    .btn_animal_01:active a::after{
        height: auto;
        aspect-ratio: 1/0.7;
        bottom: 100%;
    }
}

sample

足跡が付くボタン

画像は400*100サイズを使用しています。

コードを見る

HTML

                     
<div class="btn__ btn_animal_02">
  <a href=""><span class="text">sample</span></a>
</div>

CSS

                        
.btn__{
    display: block;
    margin: 25px auto;
    border-radius: 5px;
}

.btn__ a{
    display: block;
    width: 100px;
    padding: 1em 3em;
    text-align: center;
    color: #333;
    background-color: #FFF;
    border: 3px solid #333;
    border-radius: 5px;
    font-weight: bold;
}    
.btn_animal_02 a{
    position: relative;
    text-shadow: 1px 1px 0 #FFF, -1px -1px 0 #FFF,
    -1px 1px 0 #FFF, 1px -1px 0 #FFF,
    0px 1px 0 #FFF,  0-1px 0 #FFF,
    -1px 0 0 #FFF, 1px 0 0 #FFF;
    z-index: 1;
}
.btn_animal_02 .text{
    display: block;
}
.btn_animal_02 a::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top:0;
    left: 0;
    background-image: url('pic_03.png');
    background-size: cover;
    background-position: center;
    z-index: -3;
    opacity: 0.6;
}
.btn_animal_02 a::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: auto;
    width: 100%;
    height: 100%;
    background-color: #FFF;
    z-index: -1;
    transition: 0.5s ease-in-out;
}


@media (hover: hover) {
    .btn_animal_02:hover .text{
        transform: rotate(20deg);
        transition: 0.2s;
    }
    .btn_animal_02:hover a::after{
        width: 0;
        left: auto;
        right: 0;
    }

}

@media (hover: none) {
    .btn_animal_02:active .text{
        transform: rotate(20deg);
        transition: 0.2s;
    }
    .btn_animal_02:active a::after{
        width: 0;
        left: auto;
        right: 0;
    }
}

sample

ホバーすると猫ちゃんになるボタン

割と豪快に動くのでページが崩れるかもしれません。

コードを見る

HTML

                     
<div class="btn__ btn_animal_03">
  <a href=""><span class="text">sample</span></a>
</div>

CSS

                        
.btn__{
    display: block;
    margin: 25px auto;
    border-radius: 5px;
}

.btn__ a{
    display: block;
    width: 100px;
    padding: 1em 3em;
    text-align: center;
    color: #333;
    background-color: #FFF;
    border: 3px solid #333;
    border-radius: 5px;
    font-weight: bold;
}     
.btn_animal_03 a{
    position: relative;
    transition: 0.5s;
}

.btn_animal_03 a::before,
.btn_animal_03 a::after{
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-right: 25px solid transparent;
    border-left: 25px solid transparent;
    border-bottom: 36px solid #333;
    border-top: 0px;
    top: 0;
    z-index: -1;
    transition: 0.5s;
}
.btn_animal_03 a::before{
    left: 0%;
    transform: rotate(-20deg);
}
.btn_animal_03 a::after{
    right: 0%;
    transform: rotate(20deg);
}
@media (hover: hover) {
    .btn_animal_03 a:hover{
        color: #FFF;
        padding: 2em 3em;
        background-color: #333;
        border-radius: 100px;
    }
    .btn_animal_03 a:hover::before,
    .btn_animal_03 a:hover::after{
        top: -25px;
    }
}
@media (hover: none) {
    .btn_animal_03 a:active{
        color: #FFF;
        padding: 2em 3em;
        background-color: #333;
        border-radius: 100px;
    }
    .btn_animal_03 a:active::before,
    .btn_animal_03 a:active::after{
        top: -25px;
    }
}

(3 いいね)

読み込み中...

コピペで簡単実装OK! ホバーアニメーションボタン集

コピペでOK! ホバーアニメーション集

作成時のルール

カラー反転

シンプルな反転

真ん中から円がぽわっと広がるアニメーション

↑とは逆に外側から反転

シンプルにスライドして反転

↑の上下バージョン

真ん中からすぱっと広がるタイプ

↑の左右バージョン

ムーブ系

ふわっと浮き上がるボタン

沈むボタン

くるっと回って別の文字が出るボタン

動物系

わんこが出てくるボタン。

足跡が付くボタン

ホバーすると猫ちゃんになるボタン

Tipsカテゴリの最新記事

USB4到来！

画面外に行ってしまったウィンドウを戻す方法

標的型攻撃メールの脅威

顔認証というソリューション

迷惑メールへの対応について

Zabbixのアラート確認を自動化し、Google Chatで通知する方法