Simple on and off inline button for Tax Toggle for WooCommerce

Simple on and off inline button for Tax Toggle.md

This is a modification for Tax Toggle for WooCommerce (see https://www.taxtoggle.com?ref=gist)

It creates a simple inline button in your theme showing status of the tax toggle - either inclusive or exclusive.

How to use:

1. Go to WP Admin > WooCommerce > Settings > Tax and turn off the floating tax toggle.
2. Add the custom CSS to your theme
3. Add the custom Tax Toggle to your theme (i.e. in the header.php file). You can change the wording (Excludes Tax / Includes Tax) to anything you want to describe the on/off tax function.

tax-toggle-custom-button.html

<button id="wcvat-toggle" type="button" class="wcvat-toggle-product" data-toggle="button" aria-pressed="false" autocomplete="off">
    <span class="excluding-tax">Excludes Tax</span><span class="slash">/</span><span class="including-tax">Includes Tax</span>
</button>

tax-toggle-custom-css.css

/*
* Custom styling for Tax Toggle for WooCommerce
*
* https://www.taxtoggle.com?ref=gist
*
* Created for Tax Toggle v1.3.6
*
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

#wcvat-toggle {
     -webkit-box-sizing: border-box;
             box-sizing: border-box;
     left: unset;
     top: unset;
     z-index: unset;
     text-align: center;
     margin-left: initial;
     margin-right: initial;
     cursor: pointer;
     position: relative;
     border: none;
     border-radius: unset;
     /*   Styling */
     padding: 15px 30px;
     color: white;
     background-color: black;
     font-family: "system-ui";
     font-size: 12px;
     font-weight: 500;
     text-transform: uppercase;
}
 #wcvat-toggle:focus, #wcvat-toggle.focus, #wcvat-toggle:focus.on, #wcvat-toggle.focus.on {
     outline: none;
}
 #wcvat-toggle.on, #wcvat-toggle.on:hover {
     background-color: black;
}
 #wcvat-toggle:before {
     background-image: unset;
     background-size: unset;
     margin-right: 0;
     padding-left: 0;
}
 #wcvat-toggle.on:before {
     background-image: unset;
     background-size: unset;
     padding-left: 0;
}
 #wcvat-toggle .excluding-tax, #wcvat-toggle .including-tax {
     -webkit-transition: opacity 0.25s;
     -o-transition: opacity 0.25s;
     transition: opacity 0.25s;
}
 #wcvat-toggle .excluding-tax {
     opacity: 1;
}
 #wcvat-toggle .including-tax {
     opacity: 0.4;
}
 #wcvat-toggle.on .including-tax {
     opacity: 1;
}
 #wcvat-toggle.on .excluding-tax {
     opacity: 0.4;
}
 #wcvat-toggle .excluding-tax:hover {
     opacity: 0.7;
}
 #wcvat-toggle .including-tax:hover {
     opacity: 0.7;
}