stateClasses.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width">
	<title>State Classes</title>
	<style>
		html, body {
			/* resets */
			overflow-x: hidden;
			height: 100%;
		}
		html {
			/* resets */
			overflow-y: scroll;
			-webkit-text-size-adjust: 100%;
			-ms-text-size-adjust: 100%;
			/* style */
			font-size: 1.25vw;
			line-height: 1.618033;
			color: #555;
			background: #FFF;
		}
		body {
			/* resets */
			overflow-y: hidden;
			/* style */
			padding: 1.618033rem;
		}
		button {
			/* resets */
			margin: 0;
			background: transparent;
			border: 0;
			font-size: 100%;
			line-height: 1;
			width: auto;
			cursor: pointer;
			/* style */
			padding: 0.309016rem 0.618033rem;
		}
		.active { background-color: rgba(255,0,0, 0.25); cursor: default; }
		.hover { background-color: rgba(0,0,255, 0.25); }
	</style>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
	<script src="jquery.stateclasses.js"></script>
</head>
<body>

<h1>stateClasses</h1>
<a href="#" data-states="hover: custom hover">Test</a>

<br>

<button data-states="other: custom">Tab Name 1</button>

<script defer async>
(function ($) {
	// Global/UI helper
	$("[data-states]").stateClasses();
}(jQuery))
</script>
</body>
</html>