CSS button styling

Authoring Twine
1

This is a bit of a tricky CSS related question. I have a button that, when hovered on, changes the background image of the button to a slightly tilted variation of the original button’s background image (about 6 degrees counter clockwise). I want the text of the button to also rotate, but at the same degrees angle of the background image. If I use transform: rotate, it rotates everything (button background and text), so the text is not angled enough since my new background image is also adding to the appearance of tilt. I need a way to target just the text on hover and have it rotate like an additional 6 degrees independent of the entire button, but not sure there is a way. I could integrate the text into the background image, but seems kind of hacky

Twine code

<span class = "mainheadergauges10">\
<<button "Travel">>\
<<if $insideroom>>\
<<goto "Courtyard">>
<<else>>\
<<script>>
Dialog.setup("INFO");
Dialog.wiki("You're already inside.");
Dialog.open();
<</script>>
<</if>>\
<</button>>\
</span>\

CSS code

.mainheadergauges10 button {
  padding-top: 10px; 
  background-image: url('./misc/mainbuttonhanging1.png');  
  background-color: transparent;
  background-size:cover;
  width:90px;
  height:34px;
  margin-right:7px;
  border: none;
  border-radius: 6px;
  color: #170F1E;
  cursor: pointer;
  font-family: 'Tahoma', sans-serif;
  font-size: 13px;
  font-weight: 670;
  line-height: 24px;
  justify-content:center;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  transition: 0.5s ease cubic-bezier(.5,-0.5,.5,1.5);
}
  
.mainheadergauges10 button:hover {
  background-image: url('./misc/mainbuttonhanging2.png');  
  transform: rotate(-6deg);
  background-color: transparent;
 }

Twine Version: 2.6.1

2

Use transform: rotate but don’t change the background image?

3

No, I need to change the background image on hover to to a new, slighted varied image for the styling purposes I want.

4

Does the technique described on this page work? ETA: this page also describes a way to do this with CSS.