ホーム(記事一覧)へ

CSSでボタンの枠線ボーダーを調整する方法

「ボタンを設置したのはいいもののボーダーがどうも気になる。なんとか調整したいのだがどうすればいいのだろう?」


CSSでボタンのボーダーを調整する方法を解説します。

CSS未適用のボタン

<input type="button" value="ボタン">

inputボタンのボーダーは上と左が少し薄く、右と下が濃い線になっています。立体感を出し、ボタンらしさを表現しているんでしょうが、今どきのデザインではありません。

このボタンのボーダーを調整しましょう。

borderを指定したボタン

<style>
.example{
    border: 1px solid #333;
    padding: 10px 30px;
    background: #e4fdff;
    cursor: pointer;
}
</style>
<input type="button" value="ボタン" class="example">

borderは線の太さと線の種類と色を指定します。

「border: 1px solid #333」と指定しました。

線の太さは1px、線の種類はsolidつまりただの一本線、線の色は#333つまりほぼ黒です。

borderについてもっと詳しく知りたいならこちら↓

さらにpaddingでボタンの線と、中の文字に空間を与えましょう。

このとき縦より横の空間を多めに取りましょう。widthを指定するのもアリです。

backgroundも指定し目立たせましょう。ボタンはクリックされてナンボです。

ボーダーを指定するなら薄めのbackgroundと相性がいいですよ。

inputボタンはマウスを乗せても変化がありません。

「cursor: pointer」を指定するとマウスを乗せたとき、マウスアイコンが指アイコンに変わり、クリックできることをわかりやすくできます。

あえてborderを消したボタン

<style>
.example2{
    border: none;
    padding: 10px 30px;
    background: #1a66ce;
    color: #FFF;
    cursor: pointer;
}
</style>
<input type="button" value="ボタン" class="example2">

ボーダーを消す場合は「border: none」または「border: 0」を指定します。

ボタンを目立たせるためにbackgroundを濃い色にすることがあります。

この場合ボーダーがかえって邪魔になります。消してしまいましょう。

colorつまり文字の色は黒では見にくいため白にしています。

borderなしからborderありへ変化するボタン

マウスを乗せていない状態では背景の濃いボタン、乗せると反転させ白くなるボタンです。

このときborderは少し工夫が必要です。

<style>
.example3{
    border: 2px solid transparent;
    padding: 10px 30px;
    background: #1a66ce;
    color: #FFF;
    cursor: pointer;
}
.example3:hover{
    border: 2px solid #1a66ce;
    background: #FFF;
    color: #333;
}
</style>
<input type="button" value="ボタン" class="example3">

先述した通り背景の濃いボタンのときborderを消し、白くなったときborderを指定すると、borderの太さ分だけボタンが大きくなりボタンの大きさが変化してしまいます。

これを避けるために背景の濃いボタンのときもborderを指定します。

ただし色はtransparentつまり透明にします。これで実質線は見えません。

線の太さは白いボタンと統一しましょう。

【まとめ】ボタンのボーダーを調整する方法

線を付ける場合「border: 1px solid #333」のように指定。

backgroundが薄いならborder指定がオススメです。

線消す場合「border: none」または「border: 0」を指定。

backgroundが濃いならborderは消してしまいましょう。

borderなしからborderありへ変化するボタンにする場合、borderは消すのではなく透明にしましょう。線の太さは統一しましょう。

以上、CSSでボタンのボーダーを調整する方法でした。

関連記事