グラデーションボタンを作る方法
複数の色が滑らかにつながるグラデーションボタンを作る方法を紹介します。このサンプルでは、水色から青、紫へ横方向に変化する3色のグラデーションをボタンの背景に設定します。JavaScriptを使用せず、HTMLとCSSだけでシンプルに実装できます。
単色の背景とは異なり、複数の色を組み合わせることでボタンを鮮やかに見せることができます。申し込みやお問い合わせ、詳細ページへのリンクなど、ページ内で目立たせたいボタンのデザインとして利用できます。a要素を使用しているため、通常のリンクと同じように移動先を指定できます。
CSSではlinear-gradient()を使い、水色、青、紫の3色を左から右へ配置しています。グラデーションの色や切り替わる位置を変更することで、さまざまな配色にカスタマイズできます。ボタンの横幅や角丸、文字サイズなどもCSSで調整できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
3色を使った横方向のグラデーションボタンを確認できます。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- スマートフォン対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>グラデーションボタン</title>
<!-- CSSファイル -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- グラデーションボタン -->
<a
class="gradient-button_link"
href="#">
ボタン
</a>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではリンクとして利用できるボタンを配置し、CSSでは水色から青、紫へ横方向に変化するグラデーションを設定します。JavaScriptを使用せず、CSSのlinear-gradient()で背景のグラデーションを作ります。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはグラデーションボタンを配置するファイルです。a要素の文字を変更でき、href="#"を変更すると任意のリンク先を設定できます。
style.cssはボタンのデザインを設定するファイルです。linear-gradient()を使い、水色・青・紫の3色が左から右へ変化する背景を設定します。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置します。2つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。水色から青、紫へ横方向に変化するグラデーションボタンが表示されます。実際にリンクとして使用する場合は、a要素のhref="#"を移動先のURLへ変更してください。
カスタマイズできる内容
index.htmlではボタンに表示する文字とリンク先を変更できます。style.cssではグラデーションに使用する色や色の位置、グラデーションの方向、ボタンの内側余白、角丸、文字色、文字サイズなどを変更できます。
数値調整
style.css
padding:40px 20px;
ページ全体の内側余白です。上下の40pxを大きくすると上下の余白が広がり、左右の20pxを大きくすると画面端との間隔が広がります。
padding:14px 40px;
ボタンの内側余白です。上下の14pxを大きくするとボタンが高くなり、左右の40pxを大きくするとボタンが横に広がります。
border-radius:10px;
ボタンの角丸です。値を大きくすると丸みが強くなり、0にすると角丸のない四角いボタンになります。
background:linear-gradient(90deg,#06b6d4 0%,#2563eb 45%,#7c3aed 100%);
ボタンのグラデーションです。90degで左から右への方向を指定しています。0%・45%・100%を変更すると、水色・青・紫が配置される位置を調整できます。色コードを変更するとグラデーションの配色を変更できます。
font-size:16px;
ボタンの文字サイズです。値を大きくすると文字が大きくなり、小さくすると文字が小さくなります。
レスポンシブ対応
このサンプルではページ全体の左右に20pxの余白を確保し、ボタンは内容に合わせた横幅で表示されます。そのため、スマートフォン・タブレット・PCなど画面幅が異なる環境でも、画面端との間隔を保ちながら表示できます。
コメント