Onclick to move back and forth

1

[COLOR=#333333][FONT=Verdana] 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]

<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;
}


@-webkit-keyframes rot {
    from {
        -webkit-transform: rotate(0deg)
        translate(-150px)
        rotate(0deg);
    }
    to {
        -webkit-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;
    -webkit-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 */
    -webkit-transform: translate(-150px);
    /* PUSH OUT OF CIRCLE */
    margin-left: -20px;
}