<!-Here we have a button that will animate a circle within it-->
<!--This is the HTML Element to Animate, Its parent is the HTML Body Element-->
<button>
Refresh the Screen <span class="circle" style="top: 27px; left: 82px"></span>
</button>
button .circle{
position: absolute;
background-color: white;
width: 100px;
height: 100px;
border-radius: 50%;
transform: translate(-50%, -50%) scale(0);
animation: circle-animation 0.5s ease-out;
}
@keyframes circle-animation {
to{
transform: translate(-50%, -50%) scale(3);
opacity: 0; /*Then the circle disappears./*
}
}