Consider a scenario where there is a button:
<button href="#" class="search no-style search-active" style="display: inline-block;">
<div class="pointer" style="display:none">::after</div>
</button>
Upon activation of the button, the pseudo-class :after should have the class search-active toggled in order to define a background color for the button.
.primary .search:after,
.primary .search[data-search="disabled"]:after {
color: #fff;
content: "\E8B6";
font-family: "Material Icons";
position: absolute;
top: -25px;
transition: color .3s;
font-size: 26px;
margin-left: -10px;
}
//THIS NEEDS TO BE APPLIED TO THE :after PSEUDO CLASS TO SET THE BACKGROUND COLOR OF THE BUTTON
.search-active {
background-color: purple;
padding: 12px 33px 19px 35px;
margin: 0px -30px;
}
There is existing jQuery functionality that works with another button but does not seem to be effective in this particular case:
$(".search").on("click", function() {
$(this).toggleClass('search-active');
});
JSFIDDLE:https://jsfiddle.net/xk9hx9j9/2/