Alessio18911,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.button-tabs {
display: inline-block;
vertical-align: top;
}
.button-tabs__btn {
padding: 12px 25px;
margin: 0 10px 0 0;
font: inherit;
line-height: 20px;
background: none;
border: 1px solid violet;
border-radius: 30px;
transition: border-color 0.25s ease-in-out, background 0.25s ease-in-out, color 0.25s ease-in-out;
cursor: pointer;
}
.button-tabs__btn:last-child {
margin: 0;
}
.button-tabs__btn:hover {
border-color: red;
}
.is-active {
color: white;
background: blue;
border-color: transparent;
}
.button-tabs__btn:focus{
outline: none
}
</style>
</head>
<body>
<div class="button-tabs">
<button class="button-tabs__btn is-active"><span style="position: relative;">Левый</span></button>
<button class="button-tabs__btn"><span style="position: relative;">Правый</span></button>
</div>
<script>
var buttonTabsBtn = [].slice.call(document.querySelectorAll(".button-tabs__btn"),0);
buttonTabsBtn.forEach(function (item, i) {
item.addEventListener('click', function (e) {
buttonTabsBtn.forEach(function (item, i) {
item.classList.remove('is-active');
});
item.classList.add('is-active');
});
});
</script>
</body>
</html>