JSFiddle - React, Tailwind, and code Playground

by robaldred

HTML

<div class="JvGlobalMenu"><a href="#" class="action aside sound"><span class="icon"></span></a></div>

CSS

body {
    font-size: 12px;
}

.JvGlobalMenu {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 1px;
	z-index: 4;
}

a {
    margin: 0;
	font-weight: normal;
}

.action {
    box-shadow: 0em 0em .25em 0em rgba(0,0,0,.25);
    -webkit-appearance: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    text-decoration: none;
    pointer-events: auto;
}

.action,
.icon {
    background-image: url(http://i.imgur.com/ZvPL8kc.png);
	background-size: 72em 64em;
	background-repeat: no-repeat;
}

.action.aside,
.action.aside .icon {
	display: block;
	overflow: hidden;
	border-radius: 100%;
}

.action.aside {
	width: 6em;
	height: 6em;
	background-position: -0em -0em;
	-webkit-transform: scale(1.3334);
	   -moz-transform: scale(1.3334);
	    -ms-transform: scale(1.3334);
	     -o-transform: scale(1.3334);
	        transform: scale(1.3334);
}

.action.aside .icon {
	width: 6em;
	height: 6em;
}

.action.aside.sound {
	position: absolute;
	top: 3em;
	right: 3em;
	-webkit-transform-origin: top right;
	   -moz-transform-origin: top right;
	    -ms-transform-origin: top right;
	     -o-transform-origin: top right;
	        transform-origin: top right;
}

.action.aside.sound .icon {
	background-position: -42em -0em;
}

.action.aside.sound.off .icon {
	background-position: -48em -0em;
}

JavaScript

$('a.sound').on('mousedown',function(e) {
    e.preventDefault()
	e.stopPropagation()
    $(e.delegateTarget).toggleClass('off');
});

$('.JvGlobalMenu').show()