コピペで使える！シンプルなボタンデザイン13選！

今回はボタンのデザインサンプルをご紹介します。

コードをコピーしてソースモードで入力してお使いいただけます。

もちろん自分好みにカスタマイズして使って頂いても構いません。

01-シンプルな四角いボタン

▼以下のグレーの中をコピーして使ってください

<div style="text-align: center;"><a href="ここにリンクURLを入れます" style="background: #000000; color: #ffffff; border-radius: 0.25em; padding: 1em 2em 0.8em; line-height:1; display: inline-block;">ボタンデザイン</a></div>

02-シンプルな角丸ボタン

▼以下のグレーの中をコピーして使ってください

<div style="text-align: center;"><a href="ここにリンクURLを入れます" style="background: #000000; color: #ffffff; border-radius: 50vh; padding: 1em 2em 0.8em; line-height:1; display: inline-block;">ボタンデザイン</a></div>

03-シンプルな枠線の四角いボタン

▼以下のグレーの中をコピーして使ってください

<div style="text-align: center;"><a href="ここにリンクURLを入れます" style="border: 1px solid #000000; color: #000000; border-radius: 0.25em; padding: 1em 2em 0.8em; line-height:1; display: inline-block;">ボタンデザイン</a></div>

04-シンプルな枠線の角丸ボタン

▼以下のグレーの中をコピーして使ってください

<div style="text-align: center;"><a href="ここにリンクURLを入れます" style="border: 1px solid #000000; color: #000000; border-radius: 50vh; padding: 1em 2em 0.8em; line-height:1; display: inline-block;">ボタンデザイン</a></div>

05-立体感のある四角いボタン

▼以下のグレーの中をコピーして使ってください

<div style="text-align: center;"><a href="ここにリンクURLを入れます" style="background: #333333; color: #ffffff; box-shadow: 0 5px 0 #000000; border-radius: 0.25em; padding: 1em 2em 0.8em; line-height:1; display: inline-block;">ボタンデザイン</a></div>

06-立体感のある角丸ボタン

▼以下のグレーの中をコピーして使ってください

<div style="text-align: center;"><a href="ここにリンクURLを入れます" style="background: #333333; color: #ffffff; box-shadow: 0 5px 0 #000000; border-radius: 50vh; padding: 1em 2em 0.8em; line-height:1; display: inline-block;">ボタンデザイン</a></div>

07-グラデーションの四角いボタン

▼以下のグレーの中をコピーして使ってください

<div style="text-align: center;"><a href="ここにリンクURLを入れます" style="background: #b18309; background: linear-gradient(90deg, #b18309, #cfa836, #b18309); color: #ffffff; border-radius: 0.25em; padding: 1em 2em 0.8em; line-height:1; display: inline-block;">ボタンデザイン</a></div>

08-グラデーションの角丸ボタン

▼以下のグレーの中をコピーして使ってください

<div style="text-align: center;"><a href="ここにリンクURLを入れます" style="background: #b18309; background: linear-gradient(90deg, #b18309 0%, #cfa836 50%, #b18309 100%); color: #ffffff; border-radius: 50vh; padding: 1em 2em 0.8em; line-height:1; display: inline-block;">ボタンデザイン</a></div>

09-影のついた四角いボタン

▼以下のグレーの中をコピーして使ってください

<div style="text-align: center;"><a href="ここにリンクURLを入れます" style="background: #000000; color: #ffffff; box-shadow: 5px 5px 10px #cccccc; border-radius: 0.25em; padding: 1em 2em 0.8em; line-height:1; display: inline-block;">ボタンデザイン</a></div>

10-影のついた角丸ボタン

▼以下のグレーの中をコピーして使ってください

<div style="text-align: center;"><a href="ここにリンクURLを入れます" style="background: #000000; color: #ffffff; box-shadow: 5px 5px 10px #cccccc; border-radius: 50vh; padding: 1em 2em 0.8em; line-height:1; display: inline-block;">ボタンデザイン</a></div>

11-影のついた正円ボタン

▼以下のグレーの中をコピーして使ってください

<div style="text-align: center;"><a href="ここにリンクURLを入れます" style="background: #000000; color: #ffffff; width: 120px; height: 120px; box-shadow: 5px 5px 10px #cccccc; border-radius: 50vh; padding: 0; line-height:1; display: inline-block; position: relative;"><span style="position: absolute; top: 50%; left: 0; right: 0;transform: translateY(-50%); margin: auto; padding: 0 1em; line-height: 1.2;">ボタン<br>デザイン</span></a></div>

12-立体感のある正円ボタン

▼以下のグレーの中をコピーして使ってください

<div style="text-align: center;"><a href="ここにリンクURLを入れます" style="background: #333333; color: #ffffff; width: 120px; height: 120px; box-shadow: 0 5px 0 #000000; border-radius: 50vh; padding: 0; line-height:1; display: inline-block; position: relative;"><span style="position: absolute; top: 50%; left: 0; right: 0;transform: translateY(-50%); margin: auto; padding: 0 1em; line-height: 1.2;">ボタン<br>デザイン</span></a></div>

13-グラデーションの正円ボタン

▼以下のグレーの中をコピーして使ってください

<div style="text-align: center;"><a style="background: linear-gradient(150deg, #b18309, #d5ad37, #b18309); color: #ffffff; width: 120px; height: 120px; border-radius: 50vh; padding: 0; line-height: 1; display: inline-block; position: relative;" href="ここにリンクURLを入れます"><span style="position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); margin: auto; padding: 0 1em; line-height: 1.2;">ボタン<br />デザイン</span></a></div>

ソースモード切り替え方法