Описание
При клике по кнопке происходит смена направления градиента по часовой стрелке.
HTML
<script src="//code.jquery.com/jquery.min.js"></script> <button id="direction"></button> <div id="wrapper"></div>
JQuery
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];
$('#wrapper').css('background', 'linear-gradient(' + direction + ', #be1432, #270b36)');
});
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(//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;
}