# Onclick to move back and forth

**URL:** https://forum.kirupa.com/t/onclick-to-move-back-and-forth/332294
**Category:** Uncategorized
**Created:** [April 8, 2014, 6:12pm UTC](https://forum.kirupa.com/t/onclick-to-move-back-and-forth/332294 "2014-04-08T18:12:24Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![kadi](https://avatars.discourse-cdn.com/v4/letter/k/8edcca/32.png) [@kadi](https://forum.kirupa.com/u/kadi)
#### Post date: [April 8, 2014, 6:12pm UTC](https://forum.kirupa.com/t/onclick-to-move-back-and-forth/332294/1 "2014-04-08T18:12:24Z")

</div>

[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]

```auto
<div class="circle">
<div class="ball_blue"></div>
<div class="ball_red"></div>
</div>

```

```auto
* {
    -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;
}

```