【CSS/html】ボタンの色を変える方法

htmlの標準のボタンは背景色が灰色で目立ちません。

「でもボタンを目立たせたい！」

ボタンの色を変える方法を解説します。

inputの色を変える方法はこちら↓

クリックしたら色を変えたい場合はこちら↓

【背景色を変える】background

backgroundは背景を指定するCSSです。

これにカラーコードを指定すると指定した色になります。

buttonタグのボタン

<style>
.example{
    /*コレ*/background: yellow;
}
</style>
<input type="button" value="inputタグのボタン" class="example"><br><br>
<button class="example">buttonタグのボタン</button>

【枠線を変える】border

標準の枠線は少し太いのと上左と右下で微妙に色が違っていてダサいです。

borderを指定すると枠線を変えることができます。

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

<style>
.example2{
    /*追加*/border: 1px solid #999;
    background: yellow;
}
</style>
<input type="button" value="inputタグのボタン" class="example2">

borderについて詳しくはこちら↓

【余白を増やす】padding

ボタンの余白がないと窮屈な印象を与えたり、そもそも押しづらいものです。

paddingを指定すると枠線と文字の間の余白を取ることができます。

値は上下、左右で指定できます。

横長のボタンの場合は左右の余白を多めにとるとバランスがよくなります。

<style>
.example3{
    /*追加*/padding: 10px 20px;
    border: 1px solid #999;
    background: yellow;
}
</style>
<input type="button" value="inputタグのボタン" class="example3">

【文字色を変える】color

ボタンを目立たせるためにもう少し濃いめのボタンにしたいこともあるでしょう。

濃いめのボタンにしたときは文字色を白にしたほうが読みやすいですね。

colorは文字色を変えるCSSです。#FFFを指定して白文字にしましょう。

<style>
.example4{
    /*追加*/color: #FFF;
    padding: 10px 20px;
    /*変更*/border: none;
    /*変更*/background: green;
}
</style>
<input type="button" value="inputタグのボタン" class="example4">

背景色が濃いときは枠線が邪魔になることがあります。

border: noneを指定すると枠線を消すことができます。

【横幅を変える】width

<style>
.example5{
    /*追加*/width: 300px;
    /*追加*/text-align: center;
    color: #FFF;
    padding: 10px 20px;
    border: none;
    background: green;
}
</style>
<input type="button" value="inputタグのボタン" class="example5">

widthは横幅を指定するCSSです。

横幅を大きくすると文字が左に寄ってしまうため「text-align: center」で文字を中央寄せしましょう。

【まとめ】ボタンの色を変える方法

• 【背景色を変える】background
• 【枠線を変える】border
• 【余白を増やす】padding
• 【文字色を変える】color
• 【横幅を変える】width

以上、ボタンの色を変える方法でした。