CSSでかわいいデザインのボタン10選を現役エンジニアが紹介【初心者向け】

初心者向けにCSSでかわいいデザインのボタン10選について解説しています。ここではCSSのみで実装できるもの、フォントを使ったもの、Font Awesomeアイコンを使ったものなどいくつかのパターンを紹介します。Webデザインの参考にしてください。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

CSSでかわいいデザインのボタン10選について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のCSSカリキュラムをもとに執筆しています。

 

田島悠介

今回は、CSSに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

かわいいデザインのボタン10選について詳しく説明していくね!

大石ゆかり

お願いします!

 

目次

 

ボタンを使う場面

問い合せや資料請求など、ユーザに何かしらのアクションを求める時、ボタンを配置しクリックを促します。テキストにリンクを付けただけのものより、それがボタンと一目でわかり、クリックしたくなるようなデザインのボタンを配置するのが良いでしょう。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

かわいいデザインのボタンを紹介

シンプルでかわいいボタン

角丸でかわいいボタン

背景をアレンジしたかわいいボタン

ラインをアレンジしたかわいいボタン

文字やアイコンを使用したかわいいボタン

 

かわいいデザインのボタン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では初心者でも、最短4週間でオリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。