【HTML・CSS】CSSでボタンをクリックしたときの枠線を消す方法

デフォルトのHTMLのボタンは、次の図のように、クリック時にボタンに枠線が表示されるようになっています。

この記事では上記のような、ボタンをクリックしたときに表示される枠線をCSSで消す方法を説明します。

ボタンの周囲に表示される枠線を消す方法

以降では、まずクリックしたときに枠線が表示されるボタンを作成します。そのつぎにボタンに枠線が表示されないようにするCSSを設定していきます。

説明に使用するボタンは、次のHTMLとCSSで作成します。このボタンはクリックすると周囲に青い枠線を表示します。

<button class="button-outline">button</button>

.button-outline {
  background-color: #0a5d8a;
  width: 200px;
  height: 100px;
  color: #FFFFFF;
  font-size: 24px;  
}

ボタンのまわりに表示される枠線を消すには、CSSの”outline”プロパティを使います。

.button-outline {
  background-color: #0a5d8a;
  width: 200px;
  height: 100px;
  color: #FFFFFF;
  font-size: 24px;
  
  outline: none // ①
}

“outline: none”をボタンのスタイルに設定すると、枠線が消えます（①）。

outlineは非表示にするだけでなく、種類や幅、色を指定することもできます。