【CSS/html】ボタンの枠線の有無,色,太さを調整する方法

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

CSSでボタンの枠線の色や太さを変えたり、消す方法を解説します。

ボタン関連記事はこちら

CSS未適用のボタン

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

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

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

枠線を指定したボタン

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

枠線を指定するにはCSS「border」を指定します。

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

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

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

太さを変えるには「1px」部分の数値を変えましょう。

色を変えるには「#333」の部分を任意のカラーコードにしましょう。

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

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

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

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

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

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

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

枠線を消したボタン

<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は少し工夫が必要です。

<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:太さ 種類 色」を指定。

例）

border: 1px solid #333

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

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

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

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

以上、CSSでボタンの枠線の色や太さを変えたり、消す方法でした。