<div class="multi-button">
<button class="active">Cut</button>
<button>Copy</button>
<button>Paste</button>
</div>
body {
height: 100vh;
margin: 0;
display: grid;
place-items: center;
color: #43425d;
}
.multi-button{
border: 5px solid #43425d;
//padding: 2px;
button{
background-color: white;
border: none;
margin: 0;
padding: 1em 2em;
font-weight: bold;
outline: none;
font-size: 1.5em;
color: #43425d;
&:hover{
cursor: pointer;
transition: 0.2s ease-in-out;
}
}
}
.active{
background-color: #43425d !important;
color: whitesmoke !important;
}
View Compiled
$(document).ready(function(){
$('.multi-button').on('click', 'button', function() {
$(this).addClass('active').siblings().removeClass('active');
});
});
This Pen doesn't use any external CSS resources.