CSSで作る魅惑のグラデーションボタン

こんにちは。エンジニアの山岡です。

海外のWEBサイト（特にアメリカな気がします）で2016年頃から流行っていたグラデーションが少しずつ日本でも定着してきました。

WEBの表現が豊かになる中で、CSS3のグラデーションが与えた影響は大きいと思います。グラデーションはキャッチーですし、魅惑的なボタンは思わずポチッと押したくなります。

今回は、そんなグラデーションボタンのサンプルを３つご紹介します！

Wantedly Visit風のグラデーションボタン
Asana風のグラデーションボタン
instagram風のグラデーションボタン

CONTENTS

1 サンプル1: Wantedly Visit風
2 サンプル2: Asana風
3 サンプル3: instagram風
4 オンラインツールでグラデーションCSSを作る
5 まとめ
- 5.1 ポイントは、「ここぞ！」という要所で使うこと。

サンプル1: Wantedly Visit風

まずはWantedlyが提供する会社訪問アプリ「Wantedly Visit」風のグラデーションボタンです。
青を基調としていて、コバルトブルーからターコイズブルーへ水平方向に色を変化させています。

DEMO

<a href="#" class="btn-wantedly">もっと見る</a>

CSS

.btn-wantedly {
    background: linear-gradient(to right, rgba(24,125,221,1) 0%,rgba(0,195,193,1) 100%);
    border-radius: 25px;
    box-shadow: 0 5px 25px rgba(0,0,0,.15);
    color: #fff;
    display: inline-block;
    font-weight: 400;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    transition: all .2s linear;
    width: 150px;
}
.btn-wantedly:hover {
    box-shadow: 0 5px 25px rgba(0,0,0,.30);
}

サンプル2: Asana風

次はタスク管理アプリ「Asana」風のグラデーションボタンです。
オレンジを基調として、垂直方向に色を変化させています。安心感のある優しい色です。夕焼け空のようにも見えます。

DEMO

<a href="#" class="btn-asana">もっと見る</a>

CSS

.btn-asana {
    background: linear-gradient(45deg, rgba(255,85,102,1) 0%,rgba(255,137,109,1) 100%);
    border-radius: 25px;
    box-shadow: 0 5px 25px rgba(0,0,0,.15);
    color: #fff;
    display: inline-block;
    font-weight: 400;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    transition: all .2s linear;
    width: 150px;
}
.btn-asana:hover {
    box-shadow: 0 5px 25px rgba(0,0,0,.30);
}

サンプル3: instagram風

2016年、アプリアイコンが突然グラデーションに変わってしまったあの日の衝撃を覚えていますか。

最後は、20代を中心に人気を誇るSNS「instagram」風のグラデーションボタンです。斜め方向に色を変化させています。左下から順に、ライトイエローからオレンジ、赤系を経てパープルに変わります。

DEMO

<a href="#" class="btn-instagram">もっと見る</a>

CSS

.btn-instagram {
    background: linear-gradient(45deg, rgba(254,212,117,1) 0%,rgba(229,61,93,1) 50%,rgba(194,49,134,1) 70%,rgba(156,56,187,1) 100%);
    border-radius: 25px;
    box-shadow: 0 5px 25px rgba(0,0,0,.15);
    color: #fff;
    display: inline-block;
    font-weight: 400;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    transition: all .2s linear;
    width: 150px;
}
.btn-instagram:hover {
    box-shadow: 0 5px 25px rgba(0,0,0,.30);
}