<div id="r8-balloon-radio-group-wrapper">
    <ul>
        <li>
          <input id="op_0" class="radio r8-radio-float" type="radio" name="demo-radio-group" value="0" />
          <label for="op_0">option</label>
      </li>
        <li>
          <input id="op_1" class="radio r8-radio-float" type="radio" name="demo-radio-group" value="1" checked disabled /><label for="op_1">option</label>
      </li>
        <li><input id="op_2" class="radio r8-radio-float" type="radio" name="demo-radio-group" value="2"/>
      <label for="op_2">option</label></li>
        <li><input id="op_3" class="radio r8-radio-float" type="radio" name="demo-radio-group" value="3" />
      <label for="op_3">option</label></li>
      <li><input id="op_4" class="radio r8-radio-float" type="radio" name="demo-radio-group" value="5" disabled/><label for="op_4">option</label></li>
      </ul>
</div>
<div id="r8-logo-coin"></div>
@import url('https://fonts.googleapis.com/css?family=Raleway:300,400');

$clr--white:white;
$clr--black:black;
$clr--silver:silver;
$clr--highlight:magenta;
$clr--gray-light:whitesmoke;
$clr--gray-mid:gainsboro;
$clr--gray-dark:darkgray;

$hover-shadow--gray: $clr--gray-mid;
$def--anim-dur:250ms;
$def--anim-trans: ease-in-out;

$l--resp_display: 75rem;
$m--resp_display: 62rem;
$s--resp_display: 48rem;
$xs--resp_display: 36rem;

* {
	outline: none;
}

body {
	text-align: center;
	margin: 4rem auto;
	box-sizing: border-box;
	text-shadow: 0 1px 1px $clr--gray-mid;
  font-family: 'Raleway', sans-serif;
	-webkit-font-smoothing: antialiased;
}

#r8-balloon-radio-group-wrapper {
	margin: 8rem auto;
	width: 32rem;
	display: block;
	padding: 0rem 1rem;
  
  :disabled{
    + label {
      color:$clr--gray-dark;
    }
  }
  
  label{
    display: block;
    transform: rotateZ(-45deg);
    font-weight:300;
    position:absolute;
    left:50%;
    text-align:center;
    width:100%;
    font-size:.5rem;
    letter-spacing:.025rem;
    margin-left:calc( 50% - 25%);
    
    &::after{
       display: block;
      content: attr(for);
    }
  }

	.r8-radio-float {
    &:not([disabled]){
		&:hover {
			background: $clr--gray-light;
			box-shadow: 0 0 0.25rem $clr--white;
      animation: stabilize 1 1s;
      
      &:checked {
				box-shadow: none;
        animation:unset !important;
			}
      
      &::before{
        /* Centered disc */
        border: .125rem solid $clr--highlight;
      }
      
      &::after {
        /* Hover shadow */
        opacity: 0.45;
      }
		}
  }
	}

	ul {
		list-style: none;

		li {
			display: inline-block;
			transform: rotateZ(45deg);
		}
	}

	/* Radio Elements */
	.radio {
		position: relative;
		width: 2rem;
		height: 2rem;
		margin: .67rem;
		margin-top: 0;
		cursor: pointer;
		pointer-events: none;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		transform-origin: center;
    border: .05rem solid $clr--gray-dark;
		border-radius: 50% 50% .2rem 50%;
    background: $clr--gray-mid;
		transition: all $def--anim-dur $def--anim-trans;

		&::before,
		&::after {
			position: absolute;
			content: '';
			border-radius: 50%;
		}

		&::before {
			/* Centered disc */
			top: .25rem;
			left: .25rem;
			width: 1rem;
			height: 1rem;
			background: $clr--white;
      border: .125rem solid $clr--gray-mid;
      box-shadow: 0 0 .05rem rgba($clr--black,.25);
			pointer-events: all;
      transition: all $def--anim-dur $def--anim-trans;
		}

		&::after {
			/* Hover shadow */
			width: 2rem;
			height: .67rem;
			top: 2.19rem;
			left: 1.5rem;
			background: $hover-shadow--gray;
			opacity: 0.25;
			transform-origin: right middle;
			transform: rotateZ(-45deg);
			overflow: visible;
			background: radial-gradient(ellipse at center, $hover-shadow--gray 0%, transparent 50%);
			transition: height 1s ease, opacity 1s ease;
		}

		&:checked {
      background: $clr--gray-light;
      transform: scale(1.2);
			transition: background $def--anim-dur $def--anim-trans;
			
			&::before {
        width: .75rem;
				height: .75rem;
				background: $clr--highlight;
				border: .25rem solid rgba($clr--white, 0.5);
			}

			&:disabled {
				opacity: 0.40;
				background: $clr--gray-light;
			}
		}

		&:disabled {
			cursor: no-drop;
			opacity: 0.25;
			background: $clr--silver;
			animation: unset !important;
		}
	}
}



#r8-logo-coin {
	position: absolute;
	width: 3.5rem;
	height: 3.5rem;
	margin: 1rem;
	right: 1rem;
	bottom: 1rem;
  background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1251/R8-launcher-icon-light.svg');
    background-repeat:no-repeat;
    background-size:contain;
  background-position:0 0;
  
  &::before{
    position:relative;
    border-radius:50%;
    display:block;
    content:'';
    background-size:contain;
    background:$clr--highlight;
    margin:.5rem;
    width:calc( 90% - .6rem );
    height:calc( 90% - .6rem );
    z-index:-1;
  }
}

@media (min-width: $l--resp_display) {
	#r8-balloon-radio-group-wrapper {
		max-width: calc($l--resp_display - 3.75rem);
	}
}

@media (min-width: $m--resp_display) {
	#r8-balloon-radio-group-wrapper {
		max-width: calc($m--resp_display - 2rem);
	}
}

@media (min-width: $s--resp_display) {
	#r8-balloon-radio-group-wrapper {
		max-width: calc($s--resp_display - 3rem);
	}
}

@media (min-width: $xs--resp_display) {
	#r8-balloon-radio-group-wrapper {
		max-width: calc($xs--resp_display - 2.25rem);
	}
}

@keyframes stabilize {
	0% {
		transform: scale(0.8);
	}

	25% {
		transform: scale(1.2);
	}

	50% {
		transform: scale(0.9);
	}

	75% {
		transform: scale(1.1);
	}

	100% {
		transform: scale(1);
	}
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js