<span class="button">Click Here</span>
body {
margin: 2em;
background-color: #161819;
font: 20px/1.5 'Titillium Web', sans-serif;
}
.button {
display: inline-block;
width: 7em;
border: 0.1em solid #444f55;
border-radius: 0.3em;
padding: 0.5em;
background-color: #617078;
color: #3d484c;
text-align: center;
font-size: 1em;
line-height: 1;
font-weight: bold;
cursor: pointer;
user-select: none;
transition: background-color 200ms;
animation: 800ms infinite button;
}
.button:hover {
background-color: #6f828b;
}
.button:active {
background-color: #546269;
}
@keyframes button {
0% {
transform: rotate(-180deg) scale(0.75);
}
50% {
transform: rotate(0deg) scale(1.5);
}
100% {
transform: rotate(180deg) scale(0.75);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.