【CSS】角丸,丸いボタンの作り方【デザイン例あり】
「ボタンを角丸にして優しい印象を与えたい！」
CSSで角丸ボタンを作る方法をデザイン例とともに紹介します。
【結論】border-radiusを指定する
四角いボタン（角が丸くないボタン）を作った後にborder-radiusを指定することで角丸のボタンを作れます。
角丸ボタン<style>
.example{
/*コレ*/border-radius: 5px;
display: block;
width: 200px;
padding: 15px;
box-sizing: border-box;
background: #6fa1ff;
color: #FFF;
text-decoration: none;
text-align: center;
margin: 10px 0;
}
</style>
<a href="#" class="example">角丸ボタン</a>border-radiusは角を丸くするCSSです。ボタンに限らずdivなどの枠にも使えます。
両端が半円のボタン
border-radiusを大きくしていくと両端が半円になります。
具体的にはpaddingを含めた縦か横のうち短辺の半分以上の数値を指定します。
計算が面倒なら1000pxなどと指定しても大丈夫です。
角丸ボタン<style>
.example2{
/*コレ*/border-radius: 100px;
display: block;
width: 200px;
padding: 15px;
box-sizing: border-box;
background: #6fa1ff;
color: #FFF;
text-decoration: none;
text-align: center;
margin: 10px 0;
}
</style>
<a href="#" class="example2">角丸ボタン</a>丸いボタン
正円にするにはまず正方形のボタンを作ります。
正方形にするにはwidthとheightを同じ値にします。
正方形に「border-radius:50%」を指定すると正円になります。
丸ボタン<style>
.example3{
/*コレ*/border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
width: 200px;
height: 200px;
background: #6fa1ff;
color: #FFF;
text-decoration: none;
text-align: center;
margin: 10px 0;
}
</style>
<a href="#" class="example3">丸ボタン</a>高さを指定すると文字が上寄せになってしまうため、下記3つのCSSを指定して上下中央寄せにしています。
display: flex;
align-items: center;
justify-content: center;CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。
↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓
↑「副業してもう少し稼ぎたい！」というかたのために副業の方法も解説しています。
枠線をつける
上記のボタンに「border」を指定すると枠線付きのボタンになります。
<style>
.example-2{
/*コレ*/border: 3px solid #2544c6;
/*コレ*/border-radius: 5px;
display: block;
width: 200px;
padding: 15px;
box-sizing: border-box;
background: #eaf2fc;
color: #333;
text-decoration: none;
text-align: center;
margin: 10px 0;
}
</style>
<a href="#" class="example-2">角丸ボタン</a><style>
.example2-2{
/*コレ*/border: 3px solid #2544c6;
/*コレ*/border-radius: 100px;
display: block;
width: 200px;
padding: 15px;
box-sizing: border-box;
background: #eaf2fc;
color: #333;
text-decoration: none;
text-align: center;
margin: 10px 0;
}
</style>
<a href="#" class="example2-2">角丸ボタン</a>borderについてはこちら
文字を白くするくらい背景色が濃いときは枠はない方がスタイリッシュな印象を与えます。
逆にそれほど目立たせたくないボタンなら背景色を薄くして枠線で囲うといいでしょう。
両端が半円のボタンに影が付くと冗長な印象になるため多用しない方がいいでしょう。
影をつける
「box-shadow」を使うと影をつけることができます。
<style>
.example-3{
/*コレ*/box-shadow: 0 5px #0023b7;
/*コレ*/border-radius: 5px;
display: block;
width: 200px;
padding: 15px;
box-sizing: border-box;
background: #6fa1ff;
color: #FFF;
text-decoration: none;
text-align: center;
margin: 10px 0;
}
</style>
<a href="#" class="example-3">角丸ボタン</a><style>
.example2-3{
/*コレ*/box-shadow: 0 5px #0023b7;
/*コレ*/border-radius: 100px;
display: block;
width: 200px;
padding: 15px;
box-sizing: border-box;
background: #6fa1ff;
color: #FFF;
text-decoration: none;
text-align: center;
margin: 10px 0;
}
</style>
<a href="#" class="example2-3">角丸ボタン</a>box-shadowの値は下記のように指定します。
box-shadow: 右方向 下方向 ぼかし具合 広がり 色
- 右方向：左から光が当たっていることを表現できます。マイナスにすると逆になります。
- 下方向：上から光が当たっていることを表現できます。マイナスにすると逆になります。
- ぼかし具合：色をぼかすことができます。0にするとぼけません。省略すると0になります。
- 広がり：中心から広げることができます。0にすると広がりません。省略すると0になります。
- 色：影の色を指定します。rgbaを使うことで半透明な色も指定できます。
border-radiusの値【オススメは3～5px】
下記は0～20pxまでの数値の角丸です。比べてみてください。
3px～5px程度のほうが洗練された印象を与えます。
10pxまでならギリOKです。
20pxを指定するくらいなら両端が半円のボタンにしてしまったほうがいいでしょう。
※ボタンの大きさ、サイトのデザインにもよります。
【まとめ】角丸ボタンの作り方
四角いボタンにborder-radiusを指定する
border-radiusの値は3～5pxがオススメ
両端が半円のボタン
border-radiusの値を大きくする
→paddingを含めた縦か横のうち短辺の半分以上の数値を指定
丸いボタン
widthとheightを同じ値にし、「border-radius:50%」を指定
以上、角丸ボタンの作り方でした。
「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。
