Create toggle button in Fomantic with preview on hover appearance

Question

Disclaimer

I asked a similar question (which I deleted because it lacked some clarity, so I give it a new try).

Framework

I am developing a R / Shiny app. That is, I create most of my web interface using R libraries. One of this libraries is shiny.semantic through which I can use a pre-processed Fomantic CSS / JS bundle (Version 2.8.3).

Theoretically, I could of course also link versus the newest version of the Fomantic framework (or a customized version), but as the system I will install the app on has only limited internet access, I want to rely as much as possible on R packaged libraries (which are easy to install on the system) and keep the footprint of my package low that is do not ship my own version of Fomantic.

That means, I also have to live with the defaults the R package authors have chosen for their preprocessed CSS / JS (which from all I can judge are the factory defaults).

Having said that, my problem at hand has nothing to do with R (except that I cannot easily swap out the given Fomantic dependency), as I can create any HTML I like and thus, my problem is indeed an HTML/CSS/JS problem.

Goal

I want to have a button:

1. Which has an disabled look and feel upon loading (opacity: .45)
2. When hovering changes its color (adding class .teal) and opacity back to 1.
3. When clicked keep the color class .teal and opacity 1.
4. Now, when hovering the color should change back to no color (i.e. removing .teal) and opacity to .45.

That is the button has basically 2 states which the button should change on click. And the hover effect is kind of a preview what will happen, once we will click the button.

My try

$(document).ready(function () {
  $(".button").on({
    click: function () {
      $(this).toggleClass("is-active");
      $(this).addClass("clicked");
      $(this).off("mouseleave");
      $(this).one("mouseleave", function () {
        $(this).removeClass("clicked");
      });
    },
    mouseenter: function () {
      $(this).toggleClass("teal", !$(this).hasClass("is-active"));
      $(this).one("mouseleave", function () {
        $(this).toggleClass("teal", $(this).hasClass("is-active"));
      });
    }
  });
});

.button.is-active:not(:hover), .button:not(.is-active):hover:not(.clicked) {
  opacity: 1 !important;
}

.button.is-active:hover:not(.clicked), .button:not(.is-active) {
  opacity: 0.45 !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css" rel="stylesheet"/>

<button class="ui icon button">
<i class="less than equal icon"></i>
</button>

Issues

This seems to be rather over engineered. With the given restrictions (a pre-processed Fomantic framework) and the wish not to hard code the color in the CSS, is there a more "canonical" solution? How would a trained frontend developer solve this issue (given that they cannot customize the CSS/JS)?