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

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

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

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

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

作成時のルール

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

カラー反転

シンプルな反転

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%;
    }
}  
                        
                      

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

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;
    }
}        
                        
                      

↑とは逆に外側から反転
コードを見る

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;
    }
}        
                        
                      

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

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;
    }
}       
                        
                      

↑の上下バージョン
コードを見る

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;
    }
}

                        
                      

真ん中からすぱっと広がるタイプ
コードを見る

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;
    }
}           
                        
                      

↑の左右バージョン
コードを見る

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;
    }
}

                        
                      

ムーブ系

ふわっと浮き上がるボタン
コードを見る

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;
    }
}            
                        
                      

沈むボタン
コードを見る

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;
    }
}
             
                        
                      

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

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;
    }
}          
                        
                      

動物系

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

画像は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%;
    }
}             
                        
                      

足跡が付くボタン

画像は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;
    }
}           
                        
                      

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

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

コードを見る

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 いいね)
読み込み中...

Tipsカテゴリの最新記事