<div class="button-container">
<button type="button" class="wiggle-button"><span class="wiggle-text">Hover Me!</span></button>
</div>
.button-container{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.wiggle-button{
text-align: center;
font-size: 30px;
color: #000;
background: #fff;
width: 250px;
height: 80px;
border-radius: 30px;
border: none;
box-shadow:
0px 0px 0px 10px #ed6ac2,
0px 10px 0px 10px #cc55a5,
0px 20px 20px 15px #0003;
cursor: pointer;
border-radius: 50px 20px 50px 20px;
}
.wiggle-button span {
margin-top: 20px;
transform: rotate(-3deg);
}
.wiggle-button:hover {
animation: .8s morph ease infinite;
}
.wiggle-button:hover span {
animation: .8s rot ease infinite;
}
@keyframes morph {
0% {
border-radius: 100px 30px 100px 30px;
} 50% {
border-radius: 30px 100px 30px 100px;
} 100% {
border-radius: 100px 30px 100px 30px;
}
}
@keyframes rot {
0% {
transform: rotate(-3deg);
} 50% {
transform: rotate(3deg);
} 100% {
transform: rotate(-3deg);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.