<div class="button-container">
<button type="button" class="shake-button">Share Me!</button>
</div>
.button-container{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.shake-button {
margin: 50px auto;
width: 280px;
height: 45px;
text-align: center;
line-height: 45px;
border-radius: 36px;
color: #fff;
cursor: pointer;
border: 1px solid #2c3dcf;
background: #2c3dcf;
}
.shake-button:hover {
animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
transform: translate3d(0, 0, 0);
perspective: 1000px;
}
@keyframes shake {
10%, 90% {
transform: translate3d(-1px, 0, 0);
}
20%, 80% {
transform: translate3d(2px, 0, 0);
}
30%, 50%, 70% {
transform: translate3d(-2px, 0, 0);
}
40%, 60% {
transform: translate3d(2px, 0, 0);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.