My aim is to create a unique hover effect for a button where it tilts slightly without affecting the text. You can view my progress here: https://codepen.io/kyannashanice/pen/QWveOMg
I tried stacking the text and button in separate divs and triggering the effect on hover, but encountered an issue with centering them inside the container. I managed to find a solution to this problem, but now the button moves outside of the container instead of tilting slightly.
.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 greatly appreciate any assistance in resolving this issue. Thank you!