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

Bitfan ガイド

2023/02/07 17:30

Follow

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

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

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

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

ボタンデザイン

文字色:#ffffff
背景色:#000000

ボタンデザイン

文字色:#ffffff
背景色:#dc143c

ボタンデザイン

文字色:#ffffff
背景色:#b8d200

ボタンデザイン

文字色:#ffffff
背景色:#2c6ebd

ボタンデザイン

文字色:#000000
背景色:#ffff00

ボタンデザイン

文字色:#ffffff
背景色:#f07eb7

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

<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-シンプルな角丸ボタン

ボタンデザイン

文字色:#ffffff
背景色:#000000

ボタンデザイン

文字色:#ffffff
背景色:#dc143c

ボタンデザイン

文字色:#ffffff
背景色:#b8d200

ボタンデザイン

文字色:#ffffff
背景色:#2c6ebd

ボタンデザイン

文字色:#000000
背景色:#ffff00

ボタンデザイン

文字色:#ffffff
背景色:#f07eb7

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

<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-シンプルな枠線の四角いボタン

ボタンデザイン

文字色:#000000
線色:#000000

ボタンデザイン

文字色:#dc143c
線色:#dc143c

ボタンデザイン

文字色:#b8d200
線色:#b8d200

ボタンデザイン

文字色:#2c6ebd
線色:#2c6ebd

ボタンデザイン

文字色:#9f820c
線色:#9f820c

ボタンデザイン

文字色:#f07eb7
線色:#f07eb7

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

<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-シンプルな枠線の角丸ボタン

ボタンデザイン

文字色:#000000
線色:#000000

ボタンデザイン

文字色:#dc143c
線色:#dc143c

ボタンデザイン

文字色:#b8d200
線色:#b8d200

ボタンデザイン

文字色:#2c6ebd
線色:#2c6ebd

ボタンデザイン

文字色:#9f820c
線色:#9f820c

ボタンデザイン

文字色:#f07eb7
線色:#f07eb7

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

<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-立体感のある四角いボタン

ボタンデザイン

文字色:#ffffff
背景色:#333333
影:#000000

ボタンデザイン

文字色:#ffffff
背景色:#dc143c
影:#960e29

ボタンデザイン

文字色:#ffffff
背景色:#b8d200
影:#758500

ボタンデザイン

文字色:#ffffff
背景色:#2c6ebd
影:#1e4a7f

ボタンデザイン

文字色:#ffffff
背景色:#9f820c
影:#584807

ボタンデザイン

文字色:#ffffff
背景色:#f07eb7
影:#e83991

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

<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-立体感のある角丸ボタン

ボタンデザイン

文字色:#ffffff
背景色:#333333
影:#000000

ボタンデザイン

文字色:#ffffff
背景色:#dc143c
影:#960e29

ボタンデザイン

文字色:#ffffff
背景色:#b8d200
影:#758500

ボタンデザイン

文字色:#ffffff
背景色:#2c6ebd
影:#1e4a7f

ボタンデザイン

文字色:#ffffff
背景色:#9f820c
影:#584807

ボタンデザイン

文字色:#ffffff
背景色:#f07eb7
影:#e83991

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

<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-グラデーションの四角いボタン

ボタンデザイン

文字色:#ffffff
背景色:b18309, #d5ad37

ボタンデザイン

文字色:#ffffff
背景色:#828282, #828282

ボタンデザイン

文字色:#ffffff
背景色:#f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82

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

<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-グラデーションの角丸ボタン

ボタンデザイン

文字色:#ffffff
背景色:b18309, #d5ad37

ボタンデザイン

文字色:#ffffff
背景色:#828282, #828282

ボタンデザイン

文字色:#ffffff
背景色:#f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82

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

<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-影のついた四角いボタン

ボタンデザイン

文字色:#ffffff
背景色:#000000

ボタンデザイン

文字色:#ffffff
背景色:#dc143c

ボタンデザイン

文字色:#ffffff
背景色:#b8d200

ボタンデザイン

文字色:#ffffff
背景色:#2c6ebd

ボタンデザイン

文字色:#000000
背景色:#ffff00

ボタンデザイン

文字色:#ffffff
背景色:#f07eb7

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

<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-影のついた角丸ボタン

ボタンデザイン

文字色:#ffffff
背景色:#000000

ボタンデザイン

文字色:#ffffff
背景色:#dc143c

ボタンデザイン

文字色:#ffffff
背景色:#b8d200

ボタンデザイン

文字色:#ffffff
背景色:#2c6ebd

ボタンデザイン

文字色:#000000
背景色:#ffff00

ボタンデザイン

文字色:#ffffff
背景色:#f07eb7

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

<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-影のついた正円ボタン

ボタン
デザイン

文字色:#ffffff
背景色:#000000

ボタン
デザイン

文字色:#ffffff
背景色:#dc143c

ボタン
デザイン

文字色:#ffffff
背景色:#b8d200

ボタン
デザイン

文字色:#ffffff
背景色:#2c6ebd

ボタン
デザイン

文字色:#000000
背景色:#ffff00

ボタン
デザイン

文字色:#ffffff
背景色:#f07eb7

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

<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-立体感のある正円ボタン

ボタン
デザイン

文字色:#ffffff
背景色:#333333
影:#000000

ボタン
デザイン

文字色:#ffffff
背景色:#dc143c
影:#960e29

ボタン
デザイン

文字色:#ffffff
背景色:#b8d200
影:#758500

ボタン
デザイン

文字色:#ffffff
背景色:#2c6ebd
影:#1e4a7f

ボタン
デザイン

文字色:#000000
背景色:#ffff00
影:#cccc00

ボタン
デザイン

文字色:#ffffff
背景色:#f07eb7
影:#e83991

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

<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-グラデーションの正円ボタン

ボタン
デザイン

文字色:#ffffff
背景色:#b18309, #d5ad37

ボタン
デザイン

文字色:#ffffff
背景色:#828282, #828282

ボタン
デザイン

文字色:#ffffff
背景色:#f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82

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

<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>

カスタマイズ方法

リンク文字、リンクを書き換える
ソースモードに切り替えてから書き換えをしてください。
リンク文字は<a href="xxx" style="...></a>の間を書き換えてください。
リンクURLは<a href="ここにリンクURLを入れます">の部分を書き換えます。
色を変える
#000000#B8D200など#〜で書かれた箇所が色の指定です。この部分をお好みのカラーコードに書き換えてください。

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

 

 

Report the page

コピーしました

コピーしました