<button class="button">
	<svg class="button__icon" viewBox="0 0 256 256">
		<polygon points="128,48.907 0,176.907 30.187,207.093 128,109.28 225.813,207.093 256,176.907"/>
	</svg>
</button>
<button class="button">
	<svg class="button__icon" viewBox="0 0 256 256">
		<polygon points="79.093,0 48.907,30.187 146.72,128 48.907,225.813 79.093,256 207.093,128"/>
	</svg>
</button>
<button class="button">
	<svg class="button__icon" viewBox="0 0 256 256">
		<polygon points="225.813,48.907 128,146.72 30.187,48.907 0,79.093 128,207.093 256,79.093"/>
	</svg>
</button>
<button class="button">
	<svg class="button__icon" viewBox="0 0 256 256">
		<polygon points="207.093,30.187 176.907,0 48.907,128 176.907,256 207.093,225.813 109.28,128"/>
	</svg>
</button>
body {
    min-height: 100vh;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.button {
    margin: 32px;
    padding: 8px;
    border: none;
    border-radius: 4px;
    background: #2e8b57;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15),
                0 4px 4px rgba(0, 0, 0, 0.1),
                0 8px 8px rgba(0, 0, 0, 0.05);
}

.button__icon {
    width: 16px;
    height: 16px;
    display: block;
    fill: #ffffff;
    transition: transform 0.125s ease-in-out;
}

.button__icon--rotated {
    transform: rotate(90deg);
}
/*
Vanilla JS
const buttons = document.querySelectorAll('.button');

for (const button of buttons) {
	const icon = button.querySelector('.button__icon');
	
	button.addEventListener('click', event => {
		event.preventDefault();
		
		icon.classList.toggle('button__icon--rotated');
	});
}
*/

$(document).ready(function () {
	$('.button').click(function () {
		$(this).find('.button__icon').toggleClass('button__icon--rotated');
	});
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

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