<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<main>
<button>
Get Update
<i class="arrow">
<span class="material-symbols-outlined"> trending_flat </span>
</i>
</button>
</main>
*{
margin: 0;
padding: 0;
box-sizing: 0;
}
main{
width: 100%;
height: 100vh;
display: grid;
place-content: center;
background: white;
}
button{
transition: all .5s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
background: transparent;
border: none;
outline: none;
font-size: 20px;
cursor: pointer;
color: rgb(35, 174, 255);
}
button:hover span{
animation: arrow 1s ease infinite;
}
button:hover{
color: rgb(20, 120, 179);
}
button:hover .arrow{
color: rgb(20, 120, 179);
border-color: rgb(20, 120, 179);
}
.arrow{
transition: all .5s ease;
width: 50px;
height: 50px;
border: 2px solid rgb(35, 174, 255);
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
@keyframes arrow {
0% {
transform: translateX(0);
}
40% {
transform: translateX(10px);
}
50% {
transform: translateX(0);
}
60% {
transform: translateX(10px);
}
80% {
transform: translateX(0);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.