<div class="wrapper">
  <input type="radio" name="choice" id="yes">
  <label for="yes">Yes</label>
  
  <input type="radio" name="choice" id="no">
  <label for="no">No</label>
  
  <div class="main">
 		<div class="inner"></div>
	</div>
</div>

@import "compass/css3";

@import url(https://fonts.googleapis.com/css?family=Jura:600);

* { box-sizing: border-box; }

body { background: #f1ece6; }

.wrapper {
 	width: 250px;
  height: 320px;
  margin: 0 auto;
  position: relative;
}

.main {
  width: 250px;
  height: 250px;
  transform: rotate(43deg) scale(0.8);
  margin-bottom: 60px;
  border-radius: 50% 50% 0 50%;
  background: #faf9f1;
  background: linear-gradient(270deg, #f6f4eb, #dcd6d2);
  border: 1px solid rgba(0,0,0,0.1);
  position: relative;
  padding: 5px;
  transition: all 0.5s ease-out;
  box-shadow:
    0 0 5px rgba(150, 100, 100, 0.3),
    3px 3px 8px rgba(150,100,100,0.3); 
  /* Tim Pietrusky's proposal : */
  /* box-shadow: 
  	0 0px 8px rgba(50, 50, 50, 0.4),
  	3px 3px 8px rgba(150, 100, 100, 0.3); */
}

.inner {
  width: 100%;
  height: 100%;
  background: #faf9f1;
  background: linear-gradient(270deg, #fafaf2, #ece7e1);
  border-radius: inherit;
}

.inner:after {
  content: "";
  position: absolute; 
  width: 170px;
  height: 170px;
  left: 30px;
  top: 30px;
  border-radius: 50%;
  box-shadow: 
    inset -20px -20px 50px rgba(150,100,100,0.075),
    10px 10px 10px 5px rgba(150,100,100,0.075);
  background: inherit;
}
 
.inner:before {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  right: 20px;
  bottom: 20px;
  background: inherit;
  box-shadow:
    inset 5px 5px 15px rgba(150, 100, 100, 0.075),
    -1px -1px 3px rgba(150, 100, 100, 0.075); 
}

input[type=radio] {
  clip: rect(0 0 0 0);
  position: absolute;
  visibility: hidden;
}

input[type=radio]:checked ~ .main { transform: rotate(68deg) scale(0.8); }
#no:checked ~ .main { transform: rotate(21deg) scale(0.8); }

label {
 	position: absolute;
  bottom: 0;
  font-size: 30px;
  font-family: "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
  color: rgba(0,0,0,0.15);
  text-shadow: 0 1px 0 white, 0 -1px 0 rgba(150,100,100,0.1); 
  text-transform: uppercase;
  cursor: pointer;
  transform: scaleX(0.8); 
}

label:before {
 	content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  top: -25px;
  left: 50%;
  margin-left: -8px;
  position: absolute;
  box-shadow: 
    inset 0 -3px 3px rgba(150, 100, 100, 0.1), 
    0 2px 3px 1px rgba(150, 100, 100, 0.1);
}

label[for=yes] {
  left: 30px;
}

label[for=no] {
  right: 30px;
}