コピペでOK！ボタンホバーエフェクト15パターン

WEBデザイン制作
2020.04.28

ボタンにマウスオーバーした時の基本的なアニメーションをCSSで作ってみましょう。

1.ベースとなるソースコード

HTMLコードは以下の通り。ボタンを入れたい場所にコピペします。

<a class="button" href="#">ボタン名</a>

次にCSSには以下のコードをコピペします。 まずは見た目の前にボタンのベースとなるCSSです。

/*ここからボタンベース*/
.button {
    display: inline-block;
    width: 12rem;
    height: 4rem;
    line-height: 66px;
    text-align: center;
    cursor: pointer;
    text-decoration: none!important;
    outline: none;
}
.button::before,
.button::after {
    position: absolute;
    z-index: -1;
    display: block;
    content: '';
}
.button,
.button::before,
.button::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .3s;
    transition: all .3s;
}
/*ボタンベースここまで*/

2.デザイン用のソースコード

ボタンを押すと各CSSの場所に移動します。

管理人
管理人
01〜12はベースのCSSの下に追加でコピペするだけ！

デザインサンプル

ボタンデザイン01 ボタンデザイン02 ボタンデザイン03 ボタンデザイン04 ボタンデザイン05 ボタンデザイン06 ボタンデザイン07 ボタンデザイン08 ボタンデザイン09 ボタンデザイン10 ボタンデザイン11 ボタンデザイン12 ボタンデザイン13 ボタンデザイン14 ボタンデザイン15

コード一覧

ボタンデザイン01

/*ボタンデザイン1*/
.button { 
    background-color: #333;
    color: #fff!important;
 } 
.button:hover {
    background-color: #666;
 }

ボタンデザイン02

/*ボタンデザイン2*/
.button { 
    background-color: #fff;
    color: #333!important;
    border: 1px solid #333;
 } 
.button:hover {
    background-color: #333;
    color: #fff!important;
 }

ボタンデザイン03

/*ボタンデザイン3*/
.button { 
    background-color: #ececec;
    color: #888!important;
    border: 2px solid #ececec;
 } 
.button:hover {
    background-color: #fff;
    border: 2px solid #ececec;
 }

ボタンデザイン04 グラデーションジェネレーターを参考に色味を変えて調整するとデザインの幅も広がります。

/*ボタンデザイン4*/
.button { 
    background: -moz-linear-gradient(65deg, #F13F79, #FFC778); 
    background: -webkit-linear-gradient(65deg, #F13F79, #FFC778); 
    background: linear-gradient(25deg, #F13F79, #FFC778); 
    color: #fff!important;
 } 
.button:hover {
    opacity: 0.8;
    color: #fff!important;
 }

ボタンデザイン05

/*ボタンデザイン5*/
.button { 
    background: -moz-linear-gradient(0deg, #1d99ff 0%, #14fffd 100%); 
    background: -webkit-linear-gradient(0deg, #1d99ff 0%, #14fffd 100%); 
    background: linear-gradient(0deg, #1d99ff 0%, #14fffd 100%); 
    color: #fff!important;
 } 
.button:hover {
    opacity: 0.8;
    color: #fff!important;
 }

ボタンデザイン06

/*ボタンデザイン6*/
.button { 
    background: -moz-linear-gradient(0deg, #21e065 0%, #86ff2b 100%); 
    background: -webkit-linear-gradient(0deg, #21e065 0%, #86ff2b 100%); 
    background-image: linear-gradient(0deg, #21e065 0%, #86ff2b 100%);
    color: #fff!important;
 } 
.button:hover {
    opacity: 0.8;
    color: #fff!important;
 }

ボタンデザイン07

/*ボタンデザイン7*/
.button { 
    color: #555!important;
    border: 5px solid #eee;
    line-height: 59px;
 } 
.button:hover {
    border-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%)1/5px;
 }

ボタンデザイン08

/*ボタンデザイン8*/
.button { 
    color: #555!important;
    border: 5px solid #eee;
    line-height: 59px;
 } 
.button:hover {
    border-image: linear-gradient(180deg, #A9C9FF 0%, #ffcaea 100%)1/5px;
 }

ボタンデザイン09

/*ボタンデザイン9*/
.button { 
    color: #555!important;
    border: 5px solid #eee;
    line-height: 59px;
 } 
.button:hover {
    border-image: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%)1/5px;
 }

ボタンデザイン10

/*ボタンデザイン10*/
.button {
    background-color: #333;
    color: #fff!important;
}
.button:hover {
    letter-spacing: 2px;
}

ボタンデザイン11

/*ボタンデザイン11*/
.button {
    background-color: #3169d1;
    color: #fff !important;
    background-size: 200% 100%;	
    background-image: -webkit-linear-gradient(left, transparent 50%, rgba(153, 139, 250, 1) 50%);	
    background-image: linear-gradient(to right, transparent 50%, rgba(153, 139, 250, 1) 50%);
    -webkit-transition: background-position .3s cubic-bezier(0.19, 1, 0.22, 1) .1s, color .5s ease 0s, background-color .5s ease;
    transition: background-position .3s cubic-bezier(0.19, 1, 0.22, 1) .1s, color .5s ease 0s, background-color .5s ease;
}
.button:hover {
    background-color: #998bfa;
    background-position: -100% 100%;
}

ボタンデザイン12

/*ボタンデザイン12*/
.button {
    background-image: linear-gradient(132deg, #73deff 0%, #00b0f3 100%);
    color: #fff !important;
    margin: 0 0 10px 0;
    box-shadow: 0 3px #518bb5;
    border-radius: 100px;
}
.button:hover {
    -ms-transform: translateY(3px);
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
    border-bottom: none;
    box-shadow: none;
}

ボタンデザイン13 こちらは冒頭で説明したベースCSSごと丸変えします。

/*ボタンデザイン13*/
.button{
    display: block;
    width: 12rem;
    height: 4rem;
    line-height: 66px;
    position: relative;
    text-align: center;
    text-decoration: none!important;
    outline: none;
    cursor: pointer;
    color: #fff!important;
    z-index: 0;
}
.button:before{
    content:"";
    width:100%;
    height:100%;
    position:absolute;
    z-index:-1;
    left:0;
    transition:0.5s;
    background-image: -webkit-linear-gradient(0deg, #464646 0%, #7d7d7d 100%);
    background-image: linear-gradient(0deg, #464646 0%, #7d7d7d 100%);
}
.button:after{
    content:"";
    width:100%;
    height:100%;
    position:absolute;
    z-index:-2;
    left:0;
    background-image: -webkit-linear-gradient(0deg, #7d7d7d 0%, #464646 100%);
    background-image: linear-gradient(0deg, #7d7d7d 0%, #464646 100%);
}
.button:hover:before{
    opacity:0;
}

ボタンデザイン14 こちらも冒頭で説明したベースCSSごと丸変えします。

/*ここからデザイン14のボタンベース*/
.button {
    width: 12rem;
    height: 4rem;
    background: transparent;
    outline: none ;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
    line-height: 60px;
    text-align: center;
    text-decoration: none!important;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
/*ここまでデザイン14のボタンベース*/
/*ボタンデザイン14*/
.button{
    border: 3px solid;
    border-image: linear-gradient(90deg, #ffa9a6 0%, #ffa8fb 100%)1/3px;
    color:#333!important;
    z-index: 1;
}
.button:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background-image: linear-gradient(90deg, #ffa9a6 0%, #ffa8fb 100%);
    transition: all 0.3s ease;
}
.button:hover {
    color: #fff!important;
}
.button:hover:after {
    top: 0;
    height: 100%;
}
.button:active {
    top: 2px;
}

ボタンデザイン15 こちらも冒頭で説明したベースCSSごと丸変えします。

/*ここからデザイン15のボタンベース*/
.button {
    width: 12rem;
    height: 4rem;
    background: transparent;
    outline: none ;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
    line-height: 60px;
    text-align: center;
    text-decoration: none!important;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
/*ここまでボタンベース*/
/*ボタンデザイン15*/
.button {
    border: 2px solid #888;
    z-index: 1;
    color: #555!important;
}
.button:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 0;
    top: 0;
    left: 0;
    z-index: -1;
    background: #888;
    transition: all 0.3s ease;
}
.button:hover {
    color: #fff!important;
}
.button:hover:after {
    top: auto;
    bottom: 0;
    height: 100%;
}
.button:active {
    top: 2px;
}
タイトルとURLをコピーしました