# Onclick to move back and forth

**URL:** https://forum.kirupa.com/t/onclick-to-move-back-and-forth/332295
**Category:** Uncategorized
**Created:** [April 8, 2014, 6:15pm UTC](https://forum.kirupa.com/t/onclick-to-move-back-and-forth/332295 "2014-04-08T18:15:08Z")
**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:15pm UTC](https://forum.kirupa.com/t/onclick-to-move-back-and-forth/332295/1 "2014-04-08T18:15:08Z")

</div>

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