[CSS] インスタグラムっぽい線形グラデーションのボタン

公開日:2023/06/19

Instagramのロゴで使われているような線形グラデーションのボタンスタイルです。

このようなグラデーションの背景もCSSのみで実現できます。

サンプルコード

html

<a href="" class="instagram">インスタっぽいボタン</a>

CSS

.instagram {
    display: inline-block;
    padding: 1em 2em;
    border-radius: 10em;
    background: linear-gradient(to right,
        rgba(247, 207, 0, 0.7),
        rgba(246, 37, 2, 0.7) 45%,
        rgba(182, 47, 82, 0.7) 75%,
        rgba(113, 58, 166, 0.7));
    color: #fff;
    text-decoration: none;
    line-height: 1;
}

background-imageプロパティに「linear-gradient」関数を設定することでグラデーションの背景色をつけています。

第一引数はグラデーションの方向の指定となります。「to right」と指定することで左から右へグラデーションさせることができます。

第二引数はグラデーションの色と比率の指定となります。色と比率は「,」区切りで複数指定できます。今回は、rgbaで透明度付きの色を設定しています。これにより、インスタグラムっぽい淡いグラデーションのボタンに仕上げています。

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。