document.querySelector('.box').onclick = function() {
document.querySelector('.l').classList.toggle('l-active')
document.querySelector('.r').classList.toggle('r-active')
}
.box {
display: flex;
margin-left: 50%;
transform: translateX(-25%);
cursor: pointer;
}
.r {
width: 70px;
height: 30px;
background: white;
border-radius: 8px;
position: relative;
z-index: 99;
text-align: center;
line-height: 30px;
filter: drop-shadow(1px 1px 0px rgba(0, 0, 0, 0.3)) drop-shadow(-1px 1px 0px rgba(0, 0, 0, 0.3)) drop-shadow(-1px -1px 0px rgba(0, 0, 0, 0.3)) drop-shadow(1px -1px 0px rgba(0, 0, 0, 0.3));
transition: 1s;
}
.r::before {
content: '';
width: 0px;
height: 0px;
position: absolute;
border-style: solid;
border-width: 11px 10px 11px 0;
border-color: transparent white transparent transparent;
margin-left: -18.5px;
margin-top: 4px;
transition: 1s;
}
.r::after {
content: '';
width: 0;
height: 0;
position: absolute;
border-style: solid;
border-width: 11px 0 11px 10px;
border-color: transparent transparent transparent white;
margin-left: 8.75px;
margin-top: 4px;
transition: 1s;
}
.l {
width: 110px;
height: 2px;
background: black;
position: absolute;
margin-left: -20px;
z-index: 1;
opacity: 0.3;
align-self: center;
transition: 1s;
}
.r:hover {
filter: drop-shadow(1px 1px 0px rgba(0, 150, 0, 0.3)) drop-shadow(-1px 1px 0px rgba(0, 150, 0, 0.3)) drop-shadow(-1px -1px 0px rgba(0, 150, 0, 0.3)) drop-shadow(1px -1px 0px rgba(0, 150, 0, 0.3));
background: green;
}
.r:hover {
color: yellow;
}
.r:hover + .l {
width: 200px;
margin-left: -65px;
background: green;
}
.r:hover::after {
border-color: transparent transparent transparent green;
}
.r:hover::before {
border-color: transparent green transparent transparent;
}
.r-active {
filter: drop-shadow(1px 1px 0px rgba(0, 150, 0, 0.3)) drop-shadow(-1px 1px 0px rgba(0, 150, 0, 0.3)) drop-shadow(-1px -1px 0px rgba(0, 150, 0, 0.3)) drop-shadow(1px -1px 0px rgba(0, 150, 0, 0.3));
color: green;
}
.l-active {
background: green;
}
<div class='box'>
<div class='r'>Content</div>
<div class='l'></div>
</div>