Problem with getting div to transform within another div

Question

My goal is to basically create a button where the button rotates/tilts slightly on hover but the text does not. https://codepen.io/kyannashanice/pen/QWveOMg

I stacked the text and button in seperate div and had the effect trigger on hover but for some reason it wouldn't center the button and text inside the container. I found a solution to that issue and now instead of a slight tilt the button is moving outside of the container.

.container {
  height: 100px;
  width: 200px;
  position: relative;
  border-radius: 70%;
  padding-left: 50px;
  padding-top: 50px;
}

.text-overlay {
  color: black;
  font-size: 30px;
  z-index: 99;
  top: 50%;
  left: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.button {
  position: absolute;
  width: 200px;
  padding: 50px;
  font-size: 16px;
  background-color: cream;
  border-radius: 50%;
  position: absolute;
  z-index: -10;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.spin>button {
  display: block;
  /* removes bottom margin/whitespace */
  -webkit-transition: -webkit-transform .8s ease-in-out;
  transition: transform .8s ease-in-out;
}

.container:hover .spin>button {
  -webkit-transform: rotate(-10deg);
  transform: rotate(-10deg);
}

<div class="container">

  <div class="spin">
    <button class="button">  </button>
  </div>

  <div class="text-overlay"> READ <br> MORE </div>

</div>

I would appreciate some help to fix this! Thank you!

Answer 1

Using the code you have provided, you just need to remove the transform: translate on the elements and then tweak the top and left positions to properly place the text on top of the center of your button.

If the snippit is not what you're looking for, let me know and I can edit it or delete the answer.

.container {
 height: 100px;
  width: 200px;
  position: relative;
  border-radius: 70%;
  padding-left: 50px;
  padding-top: 50px;
}

.text-overlay {
  color: black;
  font-size: 30px;
  z-index: 99;
  position: absolute;
  top: 45%; 
  left: 45%;
}

.button {
  position: absolute;
  width: 200px;
  padding: 50px;
  font-size: 16px;
  background-color: cream;
  border-radius: 50%;
  position: absolute;
  z-index: -10;
}

/* Spin Effect */
.spin > button {
  display: block;
  /* removes bottom margin/whitespace */
  -webkit-transition: -webkit-transform .8s ease-in-out;
  transition: transform .8s ease-in-out;
}

.container:hover .spin > button {
  -webkit-transform: rotate(-10deg);
  transform: rotate(-10deg);
}

<div class="container">

  <div class="spin">
    <button class="button">  </button>
  </div>
  
  <div class="text-overlay"> READ <br> MORE </div>
  
</div>