CSS only knob

CSS_Knob

/*

Note: 
    1) THERE MUST BE A BETTER WAY TO DO THIS 
    2) The colored portion of the gradients must be the same as their parent's background
    3) The hover state was only added for demonstration
*/

* {margin: 0; padding: 0;}

body {
  background: #0c8;
	text-align: center;
  position: relative;
  padding: 100px;
}

.knob {
  width: 500px;
  height: 500px;
  background: white;
	display: inline-block;
  vertical-align: middle;
  position: relative;
	background: radial-gradient(
		transparent 50%, 
		transparent 50%, 
		white 50%,
		white
	) no-repeat,
   linear-gradient(to top,
     white 51%,
     transparent 51%
   ) no-repeat,
  radial-gradient(
		white 30%, 
		white 30%, 
		transparent 30%,
		transparent
	) no-repeat;
	background-size: 100%;
	background-position: center center;
}
.knob:before {
  content: ' ';
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  margin-left: -37.5%;
  margin-top: -37.5%;
  width: 75%;
  height: 75%;
  border-radius: 50%;
  background: linear-gradient(to top,
     #08c 50%,
     transparent 50%
   ) no-repeat;
  transform: rotate(0deg);
  transition: transform .5s ease-in-out;
  z-index: -1;
}
.knob:hover:before {
  transform: rotate(180deg);
}
.knob:after {
  content: 'Hover Me';
  display: block;
  position: absolute;
  color: #bbb;
  width: 100%;
  height: 100%;
  line-height: 475px;
  font-family: sans-serif;
  font-size: 25px;
  font-weight: 100;
}