<div class="wrapper">
<div class="toggleButton"></div>
</div>
.wrapper{
  padding:20px;
  border-radius:100px;
  background-color: #ccc;
  width: 200px;
  height: 100px;
  margin-bottom: 30px;
}

.toggleButton {
  width: 100px;
  height: 100px;
  background-color: #d7666e;
  border-radius:50%;
}

.moveToRight100px{
  margin-left:100px;
}

.toggleButton {
  transition:1s ease;  
}
$('.toggleButton').click(function(){
  $('.toggleButton').toggleClass('moveToRight100px');
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js