<div class="container">
  Hover / Tap
  <div class="dot"></div>
</div>

.container {
		    width: 300px;
		    height: 100px;
		    position: relative;
		    margin: 100px auto;
		    border-radius: 50px;
		    border: 3px dotted #eee;
        text-align: center;
        font-family: sans-serif;
        padding-top: 10px;
	    }

.dot {
		    position: absolute;
		    background: black;
		    width: 50px;
		    height: 50px;
		    border-radius: 50%;
		    transform: rotate(0deg);
		    top: 25px;
		    left: 25px;
		    transition: all 0.75s cubic-bezier(.71,0,.33,1.56) 0ms;
	    }

	    .container:hover .dot {
		    transform: rotate(360deg);
		    border-radius: 0%;
		    left: 225px;
        background: pink;
	    }