html？CSS？ボタンを画像にしたら変な四角が出た

Question

#経緯
ほぼ初めてhtmlとcssを使います。
ボタン（png画像）を追加しようと思い追加しましたが、変な四角が表示されてしまいます。※指定した画像は別の場所（表示したい場所）に表示されていて、そのボタン（画像）をクリックするとこの四角の色も変わるので、ボタンの中身？が別の場所にある状態だと考えています。
#コード

<header>
            <h1 class="reload">〇〇〇〇</h1>
            <button type="image"><img class="s_button" src="〇〇〇〇.png" width="40" height="40"></button>
</header>

.s_button{
    top:20px;
    right:20px;
    z-index: 6;
    position: fixed;
}

#実行時のページ全体イメージ（説明が下手だった気がするので）

この画像（山）をクリックすると、ボタンの中身（と思っている）四角の色が代わり、このボタンが押されている用に見えます。
#どうしたいか
この四角（中身）の消し方を教えて下さい。

Answer 1

<button> のtype属性に image という値はありません。 <input> と混同しているのかもしれません。

• <button type="button"><img src="〇〇〇〇.png" width="40" height="40"></button>
• <input type="image" src="〇〇〇〇.png" width="40" height="40">

のどちらかになるでしょう。

ご提示のCSSでは <button> ではなく <img class="s_button"> に対して、画面右上に表示させるように指定されているので、 <button> はデフォルトの表示位置に、 <img> はボタンの位置とは無関係に右上に表示されています。左下の四角は <button> の枠線です。

<!-- 横に長く見づらかったので適宜改行・インデント調整しています -->
<header>
  <h1 class="reload">〇〇〇〇</h1>
  <button type="button" class="s_button">
    <img src="〇〇〇〇.png" width="40" height="40">
  </button>
</header>

.s_button {
  top:20px;
  right:20px;
  z-index: 6;
  position: fixed;
  padding: 0;
  border: none;
}
.s_button > img {
  display: block;
}

Comments

[退会済みユーザー]

出来ました！
ありがとうございます！

Answer 2

指定しているclass="s_button"はimgではなく、buttonに指定してみてください。

<button type="image" class="s_button"><img src="〇〇〇〇.png" width="40" height="40"></button>

Comments

[退会済みユーザー]

両方（以前表示されていた画像と、中身？）画像ではなくボタンになってしまいました...