<head>
<link rel="stylesheet" type="text/css" href="admin.css">
</head>

<div class="colorSelect">
	<div class="radio">
		<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
		<label for="optionsRadios1" class="turquoise"></label>
	</div>

	<div class="radio">
		<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
		<label for="optionsRadios2" class="emerald"></label>
		</label>
	</div>

	<div class="radio">
		<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3">
		<label for="optionsRadios3" class="sky"></label>
		</label>
	</div>

	<div class="radio">
		<input type="radio" name="optionsRadios" id="optionsRadios4" value="option4">
		<label for="optionsRadios4" class="amethyst"></label>
		</label>
	</div>

	<div class="radio">
		<input type="radio" name="optionsRadios" id="optionsRadios5" value="option5">
		<label for="optionsRadios5" class="midnight"></label>
		</label>
	</div>

	<div class="radio">
		<input type="radio" name="optionsRadios" id="optionsRadios6" value="option6">
		<label for="optionsRadios6" class="sun"></label>
		</label>
	</div>

	<div class="radio">
		<input type="radio" name="optionsRadios" id="optionsRadios7" value="option7">
		<label for="optionsRadios7" class="pumpkin"></label>
		</label>
	</div>

	<div class="radio">
		<input type="radio" name="optionsRadios" id="optionsRadios8" value="option8">
		<label for="optionsRadios8" class="rose"></label>
		</label>
	</div>

	<div class="radio">
		<input type="radio" name="optionsRadios" id="optionsRadios10" value="option10">
		<label for="optionsRadios10" class="concrete"></label>
		</label>
	</div>
</div>
body {
  margin: 30px;
}

.colorSelect {

    input[type=radio] {
        display:none; 
        margin:0px;
    }

    input[type=radio] + label {
        display:inline-block;
        width: 100px;
        height: 100px;
        display: block;
        float: left;
        margin: 0px 20px 20px 0px;
    }

    input[type=radio] + label:before, input[type=radio] + label:after {
        content: '';
        display: block;
        position: relative;
        box-sizing: border-box;
        left: 50%;
        margin-left: -20px;
        border-left: 20px solid transparent;
        border-right: 20px solid transparent;
        width: 0px;
        height: 50%;
        opacity: 0;
        .transition();
    }

    input[type=radio] + label:before {
        top: -20%;
        border-top: 20px solid rgba(255,255,255,1);
        border-bottom: 20px solid transparent;
    }

    input[type=radio] + label:after {
        bottom: -20%;
        border-top: 20px solid transparent; 
        border-bottom: 20px solid rgba(255,255,255,1);
    }

    input[type=radio]:checked + label:before {
        top: 50%;
        opacity: 1;
        .transition();
    }

    input[type=radio]:checked + label:after {
        bottom: 50%;
        opacity: 1;
        .transition();
    }

    label.turquoise { #gradient > .horizontal-three-colors(#1ABC9C, #fff, 50%, #16A085); }
    label.emerald { #gradient > .horizontal-three-colors(#2ECC71, #fff, 50%, #27AE60); }
    label.sky { #gradient > .horizontal-three-colors(#3498DB, #fff, 50%, #2980B9); }
    label.amethyst { #gradient > .horizontal-three-colors(#9B59B6, #fff, 50%, #8E44AD); }
    label.midnight { #gradient > .horizontal-three-colors(#34495E, #fff, 50%, #2C3E50); }
    label.sun { #gradient > .horizontal-three-colors(#F1C40F, #fff, 50%, #F39C12); }
    label.pumpkin { #gradient > .horizontal-three-colors(#E67E22, #fff, 50%, #D35400); }
    label.rose { #gradient > .horizontal-three-colors(#E74C3C, #fff, 50%, #C0392B); }
    label.concrete { #gradient > .horizontal-three-colors(#95A5A6, #fff, 50%, #7F8C8D); }
}

.transition(@duration: .3s) {
    -webkit-transition: @duration;
       -moz-transition: @duration;
        -ms-transition: @duration;
         -o-transition: @duration;
            transition: @duration;
}

#gradient {
  .horizontal-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
    background-color: mix(@midColor, @endColor, 80%);
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0%,@startColor), color-stop(49.9%,@startColor), color-stop(50.1%,@endColor), color-stop(100%,@endColor)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, @startColor 0%,@startColor 49%,@endColor 51%,@endColor 100%); /* Chrome10+,Safari5.1+ */
    background: -moz-linear-gradient(left, @startColor 0%, @startColor 49%, @endColor 51%, @endColor 100%); /* FF3.6+ */
    background: -o-linear-gradient(left, @startColor 0%,@startColor 49%,@endColor 51%,@endColor 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left, @startColor 0%,@startColor 49%,@endColor 51%,@endColor 100%); /* IE10+ */
    background: linear-gradient(to right, @startColor 0%,@startColor 49%,@endColor 51%,@endColor 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@startColor', endColorstr='@endColor',GradientType=1 ); /* IE6-9 */
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.