ブレーンアシストオンライン

コピペで簡単実装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;
    }
}