CSSでかわいいデザインのボタン10選を現役エンジニアが紹介【初心者向け】
初心者向けにCSSでかわいいデザインのボタン10選について解説しています。ここではCSSのみで実装できるもの、フォントを使ったもの、Font Awesomeアイコンを使ったものなどいくつかのパターンを紹介します。Webデザインの参考にしてください。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
CSSでかわいいデザインのボタン10選について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。
なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のCSSカリキュラムをもとに執筆しています。
今回は、CSSに関する内容だね！
どういう内容でしょうか？
かわいいデザインのボタン10選について詳しく説明していくね！
お願いします！
目次
ボタンを使う場面
問い合せや資料請求など、ユーザに何かしらのアクションを求める時、ボタンを配置しクリックを促します。テキストにリンクを付けただけのものより、それがボタンと一目でわかり、クリックしたくなるようなデザインのボタンを配置するのが良いでしょう。
かわいいデザインのボタンを紹介
シンプルでかわいいボタン
角丸でかわいいボタン
背景をアレンジしたかわいいボタン
ラインをアレンジしたかわいいボタン
文字やアイコンを使用したかわいいボタン
かわいいデザインのボタン10選
1.二重線のボタン
HTML
<button class="Button-style">CLICK!</button>
CSS
.Button-style {
font-size: 18px;
display: inline-block;
padding: 0.5em 1em 0.3em;
color: #ff3399;
border: double 4px #ff3399;
background-color: #ffffff;
cursor: pointer;
}
See the Pen
Button01 by HO-Cosmos (@ho-cosmos)
on CodePen.
2.角丸のボタン
HTML
<button class="Button-style">CLICK!</button>
CSS
.Button-style {
font-size: 18px;
display: inline-block;
padding: 0.5em 1em 0.3em;
color: #ffffff;
border-radius: 25px;
background-color: #0099ff;
border: none;
cursor: pointer;
}
See the Pen
Button02 by HO-Cosmos (@ho-cosmos)
on CodePen.
3.背景がグラデーションのボタン
HTML
<button class="Button-style">CLICK!</button>
CSS
.Button-style {
font-size: 18px;
display: inline-block;
padding: 0.5em 1em 0.3em;
border: none;
border-radius: 5px;
background-image: linear-gradient(#13b5b1 0%, #fff45c 100%);
cursor: pointer;
}
See the Pen
Button03 by HO-Cosmos (@ho-cosmos)
on CodePen.
4.背景が水玉のボタン
HTML
<button class="Button-style">CLICK!</button>
CSS
.Button-style {
font-size: 18px;
display: inline-block;
padding: 0.5em 1em 0.3em;
color: #ffffff;
border: none;
border-radius: 5px;
background-color: #ffcccc;
background-size: 10px 10px;
background-image: radial-gradient(#f8a7b1 15%, transparent 20%),
radial-gradient(#f8a7b1 15%, transparent 20%);
background-position: 0 0, 15px 15px;
}
See the Pen
Button04 by HO-Cosmos (@ho-cosmos)
on CodePen.
5.背景がストライプのボタン
HTML
<button class="Button-style">CLICK!</button>
CSS
.Button-style {
font-size: 18px;
display: inline-block;
padding: 0.5em 1em 0.3em;
color: #0099ff;
border: none;
border-radius: 5px;
background: linear-gradient(
-45deg,
#ddeeff 25%,
#c6e6fb 25%,
#c6e6fb 50%,
#ddeeff 50%,
#ddeeff 75%,
#c6e6fb 75%,
#c6e6fb
);
background-size: 10px 10px;
cursor: pointer;
}
See the Pen
Button05 by HO-Cosmos (@ho-cosmos)
on CodePen.
6.ステッチがかわいいボタン
HTML
<button class="Button-style">CLICK!</button>
CSS
.Button-style {
font-size: 18px;
display: inline-block;
padding: 0.4em 1em 0.2em;
color: #ffffff;
border: #ffffff dashed 1px;
box-shadow: 0 0 0 0.2em #ff99cc;
border-radius: 2.5px;
background-color: #ff99cc;
cursor: pointer;
}
See the Pen
Button06 by HO-Cosmos (@ho-cosmos)
on CodePen.
7.丸いボタン
HTML
<button class="Button-style">CLICK!</button>
CSS
.Button-style {
font-size: 18px;
display: inline-block;
background: #ffffff;
color: #cc99ff;
width: 80px;
height: 80px;
border: double 4px #cc99ff;
border-radius: 50%;
text-align: center;
overflow: hidden;
cursor: pointer;
}
See the Pen
Button07 by HO-Cosmos (@ho-cosmos)
on CodePen.
8.ラインずれのプリント風のボタン
HTML
<button class="Button-style">CLICK!</button>
CSS
.Button-style {
font-size: 18px;
display: inline-block;
padding: 0.5em 1em 0.3em;
position: relative;
color: #990000;
border: solid 2px #990000;
border-radius: 5px;
background-color: transparent;
cursor: pointer;
}
.Button-style:before {
background-color: #f1e2e2;
border-radius: 5px;
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 5px;
top: 5px;
z-index: -1;
}
See the Pen
Button08 by HO-Cosmos (@ho-cosmos)
on CodePen.
9.かわいいフォントのボタン
フォントは、Google Fontsを使用します。サイト内にGoogle Fontsへのリンク（通常はhead部分）を記述することで使用することができるようになります。
<link href="https://fonts.googleapis.com/css2?family=Modak&display=swap" rel="stylesheet"> <button class="Button-style">CLICK!</button>
CSS
.Button-style {
font-family: "Modak", cursive;
font-size: 20px;
display: inline-block;
padding: 0.2em 1em 0.1em;
color: #ff0066;
border: solid 2px #ff0066;
border-radius: 5px;
background-color: #fff0f8;
cursor: pointer;
}
See the Pen
Button09 by HO-Cosmos (@ho-cosmos)
on CodePen.
10.アイコンを使用したボタン
FontAwesomeのversion 4.7を使用します。サイト内にFontAwesomeへのリンク（通常はhead部分）を記述することで使用することができるようになります。
HTML
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <button class="Button-style"><i class="fa fa-fw fa-envelope" aria-hidden="true"></i> CLICK!</button>
CSS
.Button-style {
font-family: "Modak", cursive;
font-size: 20px;
display: inline-block;
padding: 0.2em 1em 0.1em;
color: #ff0066;
border: solid 2px #ff0066;
border-radius: 5px;
background-color: #fff0f8;
cursor: pointer;
}
See the Pen
Button10 by HO-Cosmos (@ho-cosmos)
on CodePen.
以上です。ぜひ使ってみてください。
監修してくれたメンター
| 押野啓美
Webデザイン、コーディング歴、かれこれ20年！ WordpressやJavaScript、jQueryを使用したサイトの制作もしています。 TechAcademyではWebデザインコースのメンターをしています。 |
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
