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.
以上です。ぜひ使ってみてください。
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
監修してくれたメンター
| 押野啓美
Webデザイン、コーディング歴、かれこれ20年！ WordpressやJavaScript、jQueryを使用したサイトの制作もしています。 TechAcademyではWebデザインコースのメンターをしています。 |
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
