Проблема с преобразованием div в другой div. ⇐ Html

[Anonymous]

Моя цель — создать кнопку, в которой кнопка слегка вращается/наклоняется при наведении курсора, а текст — нет. https://codepen.io/kyannashanice/pen/QWveOMg
Я разместил текст и кнопку в отдельном элементе div, и эффект срабатывал при наведении курсора, но по какой-то причине он не центрировался. кнопка и текст внутри контейнера. Я нашел решение этой проблемы, и теперь вместо небольшого наклона кнопка выходит за пределы контейнера.

Код: Выделить всё

.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);
}

Код: Выделить всё

  

READ
MORE

Буду признателен за помощь в исправлении этой проблемы! Спасибо!

Подробнее здесь: https://stackoverflow.com/questions/688 ... nother-div