JSFiddle - React, Tailwind, and code Playground

by zlojnaxa

HTML

<button type="button" class="btn btn-primary button_active" style="border: solid 1px #1eae4f; color: #1eae4f; background-color: white;">Кнопка 1</button>
<button type="button" class="btn btn-primary button_active" style="border: solid 1px #1eae4f; color: #1eae4f; background-color: white;">Кнопка 2</button>
<button type="button" class="btn btn-primary button_active" style="border: solid 1px #1eae4f; color: #1eae4f; background-color: white;">Кнопка 3</button>
<button type="button" class="btn btn-primary button_active" style="border: solid 1px #1eae4f; color: #1eae4f; background-color: white;">Кнопка 4</button>

JavaScript

var btn = document.querySelectorAll('.btn');
[...btn].map((e,i)=>{
	e.onmouseover = ()=> { e.style.backgroundColor = '#1eae4f', e.style.color = 'white'; }
	e.onmouseout = ()=> { e.getAttribute('data') !== '' ? (e.style.backgroundColor = 'white', e.style.color = '#1eae4f') : ''; }
	e.onclick = ()=> {
		[...btn].map((e,i)=>{ e.setAttribute('data', 'active'), e.style.backgroundColor = 'white', e.style.color = '#1eae4f'; });
		e.setAttribute('data', ''), e.style.backgroundColor = '#1eae4f', e.style.color = 'white';
	}
});