Onclick to move back and forth

1

[COLOR=#333333][FONT=Verdana]so how can i assign a button to move red ball back and forth to avoid collision from blue ball. if collided then the blue ball should stop rotating.[/FONT][/COLOR]

[COLOR=#333333][FONT=Verdana]Code:
<div class=“circle”>
<div class=“ball_blue”></div>
<div class=“ball_red”></div>
</div>

  • {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }

@keyframes rot {
from {
transform: rotate(0deg)
translate(-150px)
rotate(0deg);
}
to {
transform: rotate(360deg)
translate(-150px)
rotate(-360deg);
}
}

.circle {
border:1px solid grey;
position: relative;
width:300px;
height:300px;
margin:25px auto;
border-radius:50%;
}

.ball_blue {
width: 40px;
height: 40px;
position: absolute;
top:50%;
left:50%;
margin-top: -20px;
margin-left: -20px;
background:blue;
border-radius:50%;
font-size: 100px;
animation: rot 3s infinite linear;
}

.ball_red {
width: 20px;
height: 20px;
position: absolute;
background:red;
border-radius:50%;
/* INITIALLY CENTERED /
top:50%;
left:50%;
margin-top: -10px;
margin-left: -10px;
/ PUSH TO CIRCLE /
transform: translate(-150px);
/ PUSH OUT OF CIRCLE */
margin-left: -20px;
}[/FONT][/COLOR]