<button>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 10L12 16L18 10" stroke="currentColor" strokeWidth="2" fill="none" />
</button>
body {
display: flex;
align-items: center;
justify-content: center;
height: 90vh;
background: #282c34;
}
button {
border-radius: 50%;
padding: 0.5rem;
animation: bounce 1s infinite;
cursor: pointer;
}
@keyframes bounce {
0%,
100% {
transform: translateY(-25%);
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
}
50% {
transform: translateY(0);
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.