ボタンからリンクの下線がはみ出てしまいます。

Question

ボタンを設置したところログアウトの寡占部分がはみ出てしまいました。

<button class="bye">ログアウト</button>

.bye {
    display: inline-block;
    padding: 10px 10px;
    text-decoration: none;
    color: #1C1C1C;
    transition: .4s;
    font-size: 30px;
}

.bye:hover {
    background: #1C1C1C;
    color: white;
}

いろいろ試したのですが、解決席なかったので質問させていただきます。よろしくお願いします。

Comments

[Sohaya]

buttonをaタグで括ってませんか？

質問のコードそのまま　https://jsfiddle.net/j05gw27x/
見た目だけ再現　https://jsfiddle.net/j05gw27x/12/

こちらの想像の域をでませんので
再現可能なコードの追記をお願いします。

また　ご質問に記載されたCSSだけではこのようにはなりません。
優先されているスタイルがほかにもあるはずですので
HEADタグ内に読み込まれているCSSファイルなどをご確認ください。

[i_r__man]

回答ありがとうございます！説明が悪くて失礼しました。おっしゃるっとりaタグでくくっていました。ありがとうございます。

[i_r__man]

ベストアンサーに登録したいので解答の方で投稿もう一度お願いできますか…？

[Sohaya]

ありがとうございます。
回答欄に転記しました。

Answer 1

buttonをaタグで括ってませんか？

質問のコードそのまま　https://jsfiddle.net/j05gw27x/
見た目だけ再現　https://jsfiddle.net/j05gw27x/12/

また　ご質問に記載されたCSSだけではこのようにはなりません。
優先されているスタイルがほかにもあるはずですので
HEADタグ内に読み込まれているCSSファイルなどをご確認ください。