JSFiddle - React, Tailwind, and code Playground

HTML

<button id="direction"></button>
<div id="wrapper"></div>

CSS

#wrapper {
background: -webkit-linear-gradient(bottom, #be1432, #270b36);
background: -moz-linear-gradient(bottom, #be1432, #270b36);
background: -o-linear-gradient(bottom, #be1432, #270b36);
background: linear-gradient(to bottom, #be1432, #270b36);
width: 100px;
height: 100px;
}

#direction {
cursor: pointer;
width: 35px;
height: 35px;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;  
background-image: url(http://xn--90abjbolhs9b.xn--p1ai/wp-content/uploads/2019/04/rotate.png);
background-size: 20px 20px;
background-position: center center;
background-repeat: no-repeat;
background-color: #333;
}

JavaScript

var i = 0;
var arr = [ 'to bottom left', 'to left', 'to top left', 'to top', 'to top right', 'to right', 'to bottom right', 'to bottom'];
$('#direction').click( function() {
 direction = arr[i++ % arr.length];			
 document.getElementById('wrapper').style.background = 'linear-gradient(' + direction + ', #be1432, #270b36)';
});