Webサイトで使える、シンプルでおしゃれなボタンデザインを15種類まとめました。
すべてHTMLとCSSをコピーして使用でき、文字や色、サイズも自由に変更できます。
お問い合わせや詳細ページへのリンクなど、サイトの雰囲気や用途に合ったボタンを探してみてください。
各ボタンのリンク先は、HTML内のURLを書き換えて設定できます。
コードの貼り付け方が分からない場合は、「CODE PICKSの使い方」をご確認ください。
シンプルで使いやすいボタン
ここからは、さまざまなサイトに取り入れやすい、シンプルなボタンデザインを紹介します。
使いやすい定番の形からアクセントのあるものまで、ブログやコーポレートサイトなど幅広いデザインに合わせられます。
DESIGN 01
ベーシックな塗りボタン
背景全体に色を付けた、シンプルで使いやすいボタンです。
装飾が控えめなので、サイトのジャンルを問わず、詳細ページやお問い合わせなどさまざまなリンクに使用できます。
<a class="button-design-01" href="https://example.com/">
詳しく見る
</a>.button-design-01 {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 220px;
min-height: 52px;
padding: 12px 28px;
color: #fff;
font-family: inherit;
font-size: 15px;
font-weight: 600;
line-height: 1.4;
text-decoration: none;
background: #c98792;
border: 0;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.25s ease;
}
.button-design-01:hover {
color: #fff;
background: #bc7784;
}
色の変更：
CSS内の「#c98792」と「#bc7784」を、
お好みのカラーコードへ変更してください。
リンク先の変更：
HTML内の「https://example.com/」を、移動させたいページのURLへ変更してください。
DESIGN 02
枠線のみのボタン
背景を塗りつぶさず、枠線だけで囲んだシンプルなボタンです。
主張が控えめなので、補助的なリンクや、すっきりとしたデザインに仕上げたい場合に使いやすくなっています。
<a class="button-design-02" href="https://example.com/">
詳しく見る
</a>.button-design-02 {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 220px;
min-height: 52px;
padding: 12px 28px;
color: #c98792;
font-family: inherit;
font-size: 15px;
font-weight: 600;
line-height: 1.4;
text-decoration: none;
background: transparent;
border: 1px solid #c98792;
border-radius: 4px;
cursor: pointer;
transition:
color 0.25s ease,
background-color 0.25s ease;
}
.button-design-02:hover {
color: #fff;
background: #c98792;
}
色の変更：
CSS内の「#c98792」を、
お好みのカラーコードへ変更してください。
リンク先の変更：
HTML内の「https://example.com/」を、移動させたいページのURLへ変更してください。
DESIGN 03
丸みのあるボタン
全体に丸みを付けた、やわらかい印象のボタンです。
親しみやすさがあるため、女性向けのサイトや、やさしい雰囲気に仕上げたいページによく合います。
<a class="button-design-03" href="https://example.com/">
詳しく見る
</a>.button-design-03 {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 220px;
min-height: 52px;
padding: 12px 28px;
color: #fff;
font-family: inherit;
font-size: 15px;
font-weight: 600;
line-height: 1.4;
text-decoration: none;
background: #c98792;
border: 0;
border-radius: 999px;
cursor: pointer;
transition: background-color 0.25s ease;
}
.button-design-03:hover {
color: #fff;
background: #bc7784;
}
色の変更：
CSS内の「#c98792」と「#bc7784」を、
お好みのカラーコードへ変更してください。
リンク先の変更：
HTML内の「https://example.com/」を、移動させたいページのURLへ変更してください。
DESIGN 04
影を付けた立体ボタン
ボタンの下側に濃い影を付けて、立体感を出したデザインです。
押せる場所だと直感的に伝わりやすく、目立たせたいリンクや申し込みボタンなどに向いています。
<a class="button-design-04" href="https://example.com/">
詳しく見る
</a>.button-design-04 {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 220px;
min-height: 52px;
padding: 12px 28px;
color: #fff;
font-family: inherit;
font-size: 15px;
font-weight: 600;
line-height: 1.4;
text-decoration: none;
background: #c98792;
border-radius: 4px;
box-shadow: 0 5px 0 #a9616e;
transition:
background-color 0.25s ease,
box-shadow 0.1s ease,
transform 0.1s ease;
}
.button-design-04:hover {
color: #fff;
background: #bc7784;
}
.button-design-04:active {
box-shadow: 0 2px 0 #a9616e;
transform: translateY(3px);
}
色の変更：
CSS内の「#c98792」「#bc7784」「#a9616e」を、
お好みのカラーコードへ変更してください。
リンク先の変更：
HTML内の「https://example.com/」を、移動させたいページのURLへ変更してください。
DESIGN 05
矢印付きのボタン
右側に矢印を付けて、リンク先へ進むことを分かりやすくしたボタンです。
詳細ページや一覧ページなど、次のページへ誘導したい場所に使いやすくなっています。
<a class="button-design-05" href="https://example.com/">
詳しく見る
</a>.button-design-05 {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 220px;
min-height: 52px;
padding: 12px 52px 12px 28px;
color: #fff;
font-family: inherit;
font-size: 15px;
font-weight: 600;
line-height: 1.4;
text-decoration: none;
background: #c98792;
border-radius: 4px;
transition: background-color 0.25s ease;
}
.button-design-05::after {
position: absolute;
top: 50%;
right: 22px;
content: "→";
font-size: 18px;
font-weight: 400;
line-height: 1;
transform: translateY(-50%);
}
.button-design-05:hover {
color: #fff;
background: #bc7784;
}
色の変更：
CSS内の「#c98792」と「#bc7784」を、
お好みのカラーコードへ変更してください。
リンク先の変更：
HTML内の「https://example.com/」を、移動させたいページのURLへ変更してください。
DESIGN 06
左ライン付きボタン
左側に細いラインを入れて、さりげないアクセントを加えたボタンです。
装飾を抑えながらリンクの存在を示せるため、シンプルなサイトや落ち着いたページによく合います。
<a class="button-design-06" href="https://example.com/">
詳しく見る
</a>.button-design-06 {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 220px;
min-height: 52px;
padding: 12px 28px;
color: #292d38;
font-family: inherit;
font-size: 15px;
font-weight: 600;
line-height: 1.4;
text-decoration: none;
background: #f9eff1;
border-left: 2px solid #c98792;
transition: background-color 0.25s ease;
}
.button-design-06:hover {
color: #292d38;
background: #f3e1e5;
}
色の変更：
CSS内の「#f9eff1」「#c98792」「#f3e1e5」を、
お好みのカラーコードへ変更してください。
リンク先の変更：
HTML内の「https://example.com/」を、移動させたいページのURLへ変更してください。
DESIGN 07
斜め角のボタン
両端を斜めにカットして、シャープな印象に仕上げたボタンです。
シンプルながら形に特徴があるため、スタイリッシュなサイトや目を引かせたいリンクに向いています。
<a class="button-design-07" href="https://example.com/">
詳しく見る
</a>.button-design-07 {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 220px;
min-height: 52px;
padding: 12px 32px;
color: #fff;
font-family: inherit;
font-size: 15px;
font-weight: 600;
line-height: 1.4;
text-decoration: none;
background: #c98792;
clip-path: polygon(
10px 0,
100% 0,
calc(100% - 10px) 100%,
0 100%
);
transition: background-color 0.25s ease;
}
.button-design-07:hover {
color: #fff;
background: #bc7784;
}
色の変更：
CSS内の「#c98792」と「#bc7784」を、
お好みのカラーコードへ変更してください。
リンク先の変更：
HTML内の「https://example.com/」を、移動させたいページのURLへ変更してください。
DESIGN 08
横幅いっぱいのワイドボタン
横幅いっぱいに広がる、存在感のあるワイドボタンです。
申し込みやお問い合わせなど、ページ内で特に目立たせたいリンクに向いています。
<a class="button-design-08" href="https://example.com/">
詳しく見る
</a>.button-design-08 {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 56px;
padding: 14px 28px;
color: #fff;
font-family: inherit;
font-size: 15px;
font-weight: 600;
line-height: 1.4;
text-decoration: none;
background: #8790a1;
border-radius: 4px;
transition: background-color 0.25s ease;
}
.button-design-08:hover {
color: #fff;
background: #747d8f;
}
色の変更：
CSS内の「#8790a1」と「#747d8f」を、
お好みのカラーコードへ変更してください。
リンク先の変更：
HTML内の「https://example.com/」を、移動させたいページのURLへ変更してください。
DESIGN 09
グラデーションボタン
2色をなめらかにつないだ、グラデーションのボタンです。
シンプルな形でも華やかさを加えられるため、ページのアクセントや目立たせたいリンクに向いています。
<a class="button-design-09" href="https://example.com/">
詳しく見る
</a>.button-design-09 {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 220px;
min-height: 52px;
padding: 12px 28px;
color: #fff;
font-family: inherit;
font-size: 15px;
font-weight: 600;
line-height: 1.4;
text-decoration: none;
background: linear-gradient(
135deg,
#c98792 0%,
#8790a1 100%
);
border-radius: 4px;
transition: opacity 0.25s ease;
}
.button-design-09:hover {
color: #fff;
opacity: 0.82;
}
色の変更：
CSS内の「#c98792」と「#8790a1」を、
お好みのカラーコードへ変更してください。
リンク先の変更：
HTML内の「https://example.com/」を、移動させたいページのURLへ変更してください。
DESIGN 10
二重線のボタン
外側を二重線で囲み、上品な印象に仕上げたボタンです。
通常の枠線よりも装飾性があり、案内ページや落ち着いた雰囲気のサイトによく合います。
<a class="button-design-10" href="https://example.com/">
詳しく見る
</a>.button-design-10 {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 220px;
min-height: 52px;
padding: 12px 28px;
color: #c98792;
font-family: inherit;
font-size: 15px;
font-weight: 600;
line-height: 1.4;
text-decoration: none;
background: #fff;
border: 4px double #c98792;
border-radius: 4px;
transition: background-color 0.25s ease;
}
.button-design-10:hover {
color: #c98792;
background: #f9eff1;
}
色の変更：
CSS内の「#c98792」と「#f9eff1」を、
お好みのカラーコードへ変更してください。
リンク先の変更：
HTML内の「https://example.com/」を、移動させたいページのURLへ変更してください。
DESIGN 11
下線を使ったテキストボタン
文字の下にラインを引いた、すっきりとしたテキストボタンです。
背景や枠を使わないため主張が控えめで、文章の近くに置くリンクや補助的な導線に向いています。
<a class="button-design-11" href="https://example.com/">
詳しく見る
</a>.button-design-11 {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 4px;
color: #292d38;
font-family: inherit;
font-size: 15px;
font-weight: 600;
line-height: 1.4;
text-decoration: none;
border-bottom: 2px solid #c98792;
transition:
color 0.25s ease,
border-color 0.25s ease;
}
.button-design-11:hover {
color: #c98792;
border-color: #bc7784;
}
色の変更：
CSS内の「#c98792」を、
お好みのカラーコードへ変更してください。
リンク先の変更：
HTML内の「https://example.com/」を、移動させたいページのURLへ変更してください。
DESIGN 12
点線枠のボタン
外側を点線で囲み、軽やかな印象に仕上げたボタンです。
かしこまりすぎない雰囲気があるため、ブログや親しみやすいサイトのリンクに向いています。
<a class="button-design-12" href="https://example.com/">
詳しく見る
</a>.button-design-12 {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 220px;
min-height: 52px;
padding: 12px 28px;
color: #c98792;
font-family: inherit;
font-size: 15px;
font-weight: 600;
line-height: 1.4;
text-decoration: none;
border: 1px dashed #c98792;
border-radius: 4px;
transition: background-color 0.25s ease;
}
.button-design-12:hover {
color: #c98792;
background: #f9eff1;
}
色の変更：
CSS内の「#c98792」と「#f9eff1」を、
お好みのカラーコードへ変更してください。
リンク先の変更：
HTML内の「https://example.com/」を、移動させたいページのURLへ変更してください。
DESIGN 13
上下ラインのボタン
文字の上下にラインを入れた、端正で落ち着きのあるボタンです。
余計な装飾を使わずにリンクを目立たせられるため、シンプルで大人っぽいデザインによく合います。
<a class="button-design-13" href="https://example.com/">
詳しく見る
</a>.button-design-13 {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 220px;
min-height: 52px;
padding: 12px 28px;
color: #292d38;
font-family: inherit;
font-size: 15px;
font-weight: 600;
line-height: 1.4;
text-decoration: none;
border-top: 1px solid #292d38;
border-bottom: 1px solid #292d38;
transition: opacity 0.25s ease;
}
.button-design-13:hover {
color: #292d38;
opacity: 0.65;
}
色の変更：
CSS内の「#292d38」を、
お好みのカラーコードへ変更してください。
リンク先の変更：
HTML内の「https://example.com/」を、移動させたいページのURLへ変更してください。
DESIGN 14
ずらした枠のボタン
ボタンの後ろに枠線を少しずらして重ねた、奥行きのあるデザインです。
シンプルな形にアクセントを加えられるため、個性を出したいリンクや目立たせたいボタンに向いています。
<a class="button-design-14" href="https://example.com/">
詳しく見る
</a>.button-design-14 {
position: relative;
z-index: 0;
isolation: isolate;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 220px;
min-height: 52px;
padding: 12px 28px;
color: #292d38;
font-family: inherit;
font-size: 15px;
font-weight: 600;
line-height: 1.4;
text-decoration: none;
background: #fff;
border: 1px solid #c98792;
transition: background-color 0.25s ease;
}
.button-design-14::before {
position: absolute;
top: 6px;
left: 6px;
z-index: -1;
width: 100%;
height: 100%;
content: "";
border: 1px solid #8790a1;
pointer-events: none;
}
.button-design-14:hover {
color: #292d38;
background: #f9eff1;
}
色の変更：
CSS内の「#c98792」「#8790a1」「#f9eff1」を、
お好みのカラーコードへ変更してください。
リンク先の変更：
HTML内の「https://example.com/」を、移動させたいページのURLへ変更してください。
DESIGN 15
コーナーラインのボタン
左上と右下にラインを置き、枠の一部だけを見せたボタンです。
余白を活かした軽やかなデザインで、シンプルなページにさりげないアクセントを加えられます。
<a class="button-design-15" href="https://example.com/">
詳しく見る
</a>.button-design-15 {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 220px;
min-height: 52px;
padding: 12px 28px;
color: #292d38;
font-family: inherit;
font-size: 15px;
font-weight: 600;
line-height: 1.4;
text-decoration: none;
transition: background-color 0.25s ease;
}
.button-design-15::before,
.button-design-15::after {
position: absolute;
width: 28px;
height: 18px;
content: "";
pointer-events: none;
}
.button-design-15::before {
top: 0;
left: 0;
border-top: 1px solid #c98792;
border-left: 1px solid #c98792;
}
.button-design-15::after {
right: 0;
bottom: 0;
border-right: 1px solid #c98792;
border-bottom: 1px solid #c98792;
}
.button-design-15:hover {
color: #292d38;
background: #f9eff1;
}
色の変更：
CSS内の「#c98792」と「#f9eff1」を、
お好みのカラーコードへ変更してください。
リンク先の変更：
HTML内の「https://example.com/」を、移動させたいページのURLへ変更してください。
まとめ
今回は、HTMLとCSSをコピーして使える、シンプルでおしゃれなボタンデザインを15種類紹介しました。
色や文字、サイズを変更するだけでも印象が変わるので、サイトの雰囲気や用途に合わせて調整してみてください。
ボタンとあわせて見出しも整えたい方は、「シンプルでおしゃれな見出しデザイン17選」も参考にしてみてください。
