マウスオーバー時に背景画像だけ動かしたい

Question

前提・実現したいこと

マウスオーバー時に背景画像のみ回転させたい。

ここに質問の内容を詳しく書いてください。

クリックすると別ページにリンクするボタンの円形の背景画像を作成し、backgroundimageで背景画像に設定しました。中に文字を入れた状態で、背景画像のみ回転したいのですが、全て一緒に動いてしまいます。調べてみたのですが、解決方法が見当たらず訂正すべき箇所をご教授頂けますと幸いです。よろしくお願いします。

該当のソースコード

HTML

<div id="recruit_but"> <a href="#"> <h6><img src="images/recruit_but2.png" alt=""></h6> </a> </div>

CSS

#recruit_but{
position: absolute;
width:168px;
height:168px;
right:50px;
bottom:50px;
}
#recruit_but a{
display: block;
width:100%;
height:100%;
background-image: url(../images/recruit_but.png);
}
#recruit_but {
transition: .5s ;
transform: rotateZ( 0deg ) ;
}
#recruit_but:hover{
transform: rotateZ( 300deg ) ;
}

#recruit_but h6 img{
width:20px;
}
#recruit_but h6:hover{
padding-left: 10px;
transition: 0.7s;}

前提・実現したいこと

マウスオーバー時に背景画像のみ回転させたい。

ここに質問の内容を詳しく書いてください。

クリックすると別ページにリンクするボタンの円形の背景画像を作成し、backgroundimageで背景画像に設定しました。中に文字を入れた状態で、背景画像のみ回転したいのですが、全て一緒に動いてしまいます。調べてみたのですが、解決方法が見当たらず訂正すべき箇所をご教授頂けますと幸いです。よろしくお願いします。

該当のソースコード

HTML

<div id="recruit_but"> <a href="#"> <h6><img src="images/recruit_but2.png" alt=""></h6> </a> </div>

CSS

#recruit_but{
position: absolute;
width:168px;
height:168px;
right:50px;
bottom:50px;
}
#recruit_but a{
display: block;
width:100%;
height:100%;
background-image: url(../images/recruit_but.png);
}
#recruit_but {
transition: .5s ;
transform: rotateZ( 0deg ) ;
}
#recruit_but:hover{
transform: rotateZ( 300deg ) ;
}

#recruit_but h6 img{
width:20px;
}
#recruit_but h6:hover{
padding-left: 10px;
transition: 0.7s;}

Comments

[m.ts10806]

コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564