【解決方法】クラス="ボタン" 内側のボタン属性が機能しない

class=”btn” は < a > 属性内でのみ使用でき、< button > 属性や < input > 属性内では使用できないのはなぜですか?
< button > または < input > の中に置くと機能しますが、 < a > < /a > の場合とは異なり、ホバーは < button > または < input > 属性では機能しません

html:

<tr>
<td><button class="btn" type="submit">Se Connecter</button></td>
<td><a class="btn" href="ajout.php">S'inscrire</a></td>
</tr>

css:

.button{
	position: absolute;
	top: 60%;
	left: 50%;
	transform: translate(-50%,-50%);
}
.btn{
	border: 1px solid #fff;
	padding: 10px 30px;
	color: #fff;
	text-decoration: none;
	transition: 0.6s ease;
}
.btn:hover{
background-color: #fff;
color: #000;
}

私が試したこと:

私はSubmitタイプが必要なので、使用しなければならないケースにいます。
私は試した：

<td><a class="btn"><button  type="submit">Se Connecter</button></a></td>

基本ボタンと CSS スタイルのボタンの 2 種類のボタンを重ねて示しています。

解決策 1

これは混乱です:

<td><a class="btn"><button  type="submit">Se Connecter</button></a></td>

なぜなら、ボタンを取得してから表のセル内を取得しているのに、ボタンの周囲にリンクをラップしているからです。 HTML の観点から見ると (これがアクションを制御するものです)、同じレンダリングされたオブジェクトをジョブに与えて同時に実行すると、そのうちの 1 つ (おそらく出力のような要素) がライブオブジェクトとして選択されます。

:フーバー は、リンクの動作を示しています (ホバーするとリンクが赤で「点灯」します。要素は、それに適用されない属性を単純に無視します。

コードの残りの部分は表示されませんが、type=”submit” の入力ボタンは