<div>
  <img src="https://res.cloudinary.com/nucliweb/image/upload/v1578154091/joanleon.dev/JL.svg" alt="Joan León" title="Joan León" class="logo">
</div>
<button class="handler">Move logo</button>

html,
body {
  height: 100%;
  margin: 0;
}

body {
  background-color: #1a202c;
}

.logo {
  border-radius: 50%;
  transition: transform .5s ease;
  width: 150px;
}

.moveToRight {
  transform: translateX(200px) scale(1.4) rotate(180deg);
}

.handler {
  background-color: hsla(205, 90%, 60%, 1);
  border: 1px solid white;
  border-radius: 4px;
  color: #1a202c;
  font-size: 1.2em;
  margin: 1em;
  padding: .2em .4em;
}

.handler:hover {
  background-color: hsla(205, 90%, 50%, 1);
}

let handler = document.querySelector('.handler');
let target = document.querySelector('.logo');
handler.addEventListener('click', element => {
  target.classList.toggle('moveToRight')
})