<header>
  <h1>Material design morphing icons</h1>
  <a href="#" class="btn play">
    <span>
      <span class="s1"></span>
      <span class="s2"></span>
      <span class="s3"></span>
    </span>
  </a>
</header>
<article>
  <p class="arrows">
    <a href="#" id="prev" class="btn leftArrow"><span><span class="s1"></span><span class="s2"></span><span class="s3"></span></span></a>
    <a href="#" id="next" class="btn rightArrow"><span><span class="s1"></span><span class="s2"></span><span class="s3"></span></span></a>
  </p>
  <form class="row">
    <div class="col50">
      <fieldset>
        <h3>Glyph</h3>
        <label><input type="radio" name="button" value="play" checked>Play</label>
        <label><input type="radio" name="button" value="pause">Pause</label>
        <label><input type="radio" name="button" value="stop">Stop</label>
        <label><input type="radio" name="button" value="menu">Menu</label>
        <label><input type="radio" name="button" value="close">Close</label>
        <label><input type="radio" name="button" value="plus">Plus</label>
        <label><input type="radio" name="button" value="minus">Minus</label>
        <label><input type="radio" name="button" value="more">More</label>
        <label><input type="radio" name="button" value="topArrow">Top arrow</label>
        <label><input type="radio" name="button" value="rightArrow">Right arrow</label>
        <label><input type="radio" name="button" value="bottomArrow">Bottom arrow</label>
        <label><input type="radio" name="button" value="leftArrow">Left arrow</label>
        <label><input type="radio" name="button" value="checked">Checked</label>
        <label><input type="radio" name="button" value="heart">Heart</label>
      </fieldset>
    </div>
    <div class="col50">
      <fieldset>
        <h3>Size</h3>
        <label><input type="radio" name="size" value="small">Small</label>
        <label><input type="radio" name="size" value="medium" checked>Medium</label>
        <label><input type="radio" name="size" value="large">Large</label>
        <label><input type="radio" name="size" value="xl">XL</label>
      </fieldset>
      <fieldset>
        <h3>Color</h3>
        <label><input type="radio" name="color" value="pink" checked>Pink</label>
        <label><input type="radio" name="color" value="indigo">Indigo</label>
        <label><input type="radio" name="color" value="cyan">Cyan</label>
        <label><input type="radio" name="color" value="lightGreen">Light Green</label>
        <label><input type="radio" name="color" value="amber">Amber</label>
        <label><input type="radio" name="color" value="grey">Grey</label>
      </fieldset>
    </div>
  </form>
</article>
html , body { width: 100%; height: 100%; margin: 0; padding: 0; font-family: 'Roboto', sans-serif; font-size: 14px; background-color: #eeeeee; color: #949494; }
* { box-sizing: border-box; }
h1 { font-size: 2.5em; font-weight: 400; }
article { padding: 4em 3em; overflow: hidden; }
p.arrows { text-align: right; margin: 0 0 1em 0; transition: all 0.5s ease; }
p.arrows .btn { margin: 0.2em; }
body.small p.arrows { margin-right: -0.8em; }
body.large p.arrows { margin-right: 0.5em; }
body.xl p.arrows { margin-right: 3.1em; margin-top: 2.4em; }
label { display: block; line-height: 2em; }
label input { width: 1.3em; height: 1.3em; margin: 0 0.5em 0 0; vertical-align: middle; }
fieldset { border: 0; margin: 0 0 2em 0; padding: 1em; background-color: #f7f7f7; box-shadow: 0 0 5px rgba(0,0,0,0.2); overflow: hidden; border-radius: 0.3em; }
fieldset > h3 { font-weight: 500; font-size: 1.2em; background-color: #FFF; margin: -0.824em -0.824em 0.824em -0.824em; padding: 1em; box-shadow: 0 0 3px rgba(0,0,0,0.1); border-radius: 0.3em 0.3em 0 0; }
.row { margin: 0 -1em; }
.col50 { float: left; width: 50%; padding: 0 1em; }
@media screen and (max-width : 600px) {
  .col50 { float: none; width: auto; }
}
header { background-color: #3f51b5; padding: 6em 3em 3em 3em; color: #FFF; box-shadow: 0 0 10px rgba(0,0,0,0.4); position: relative; }
header > h1 { margin: 0; }
header > .btn { position: absolute; bottom: -2em; right: 3em; font-size: 1.5em; box-shadow: 0 0 10px rgba(0,0,0,0.2); }
body.small header > .btn { font-size: 1.2em; right: 3.7em; }
body.large header > .btn { font-size: 1.8em; right: 2.5em; }
body.xl header > .btn { font-size: 3em; right: 1.5em;  }
.btn { display: inline-block; width: 4em; height: 4em; background-color: #FFF; color: #9e9e9e; box-shadow: 0 0 5px rgba(0,0,0,0.2); border-radius: 2em; overflow: hidden; transform: translateZ(0); transition: all 0.5s ease; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
.btn:hover { box-shadow: 0 0 10px rgba(0,0,0,0.4); }
.btn:active { transform: scale(1.1,1.1); }
.btn:focus { outline: 0; border:none; color: rgba(0, 0, 0, 0); }
.btn > span { display: block; position: relative; width: 2em; height: 2em; transition: transform 0.5s ease; overflow: hidden; margin: 1em; }
.btn > span > span { display: block; background-color: #9e9e9e; position: absolute; top: 0; left: 0; width: 2em; height: 2em; transition: all 0.5s ease; border: 1px solid transparent; }
header .btn > span > span { background-color: #e91e63; }
.btn.play > span { transform: translate(1em,0) scale(1.6,1); }
.btn.play > span > span { transform: rotate(-45deg) translate(-1em, -1em) scale(1,1); }
.btn.pause > span > span { transform: scale(0.4,1) translate(-1.6em, 0); }
.btn.pause > span > span.s3 { transform: scale(0.4,1) translate(1.6em, 0); }
.btn.stop > span { transform: scale(0.8,0.8); }
.btn.menu > span > span { transform: scale(1,0.2) translate(0,-3em); }
.btn.menu > span > span.s2 { transform: scale(1,0.2) translate(0,0); }
.btn.menu > span > span.s3 { transform: scale(1,0.2) translate(0,3em); }
.btn.close > span  { transform: rotate(45deg); }
.btn.close > span > span , .btn.plus > span > span { transform: scale(1,0.2); }
.btn.close > span > span.s3 , .btn.plus > span > span.s3 { transform: scale(0.2,1); }
.btn.minus > span > span { transform: scale(1,0.2); }
.btn.more > span > span { transform: scale(0.2,0.2) translate(-3em,0); border-radius: 2em; }
.btn.more > span > span.s2 { transform: scale(0.2,0.2) translate(0,0); }
.btn.more > span > span.s3 { transform: scale(0.2,0.2) translate(3em,0); }
.btn.topArrow > span > span { width: 0.4em; height: 1.8em; transform: translate(0.8em,0.2em); }
.btn.topArrow > span > span.s2 { transform-origin: 0 0; height: 1.4em; transform: translate(1em,0) rotate(45deg); }
.btn.topArrow > span > span.s3 { transform-origin: 100% 0; height: 1.4em; transform: translate(0.6em,0) rotate(-45deg); }
.btn.bottomArrow > span > span { width: 0.4em; height: 1.8em; transform: translate(0.8em,0); }
.btn.bottomArrow > span > span.s2 { transform-origin: 100% 100%; height: 1.4em; transform: translate(0.6em,0.6em) rotate(45deg); }
.btn.bottomArrow > span > span.s3 { transform-origin: 0 100%; height: 1.4em; transform: translate(1em,0.6em) rotate(-45deg); }
.btn.rightArrow > span > span { width: 1.8em; height: 0.4em; transform: translate(0,0.8em); }
.btn.rightArrow > span > span.s2 { transform-origin: 100% 0; width: 1.4em; transform: translate(0.6em,1em) rotate(45deg); }
.btn.rightArrow > span > span.s3 { transform-origin: 100% 100%; width: 1.4em; transform: translate(0.6em,0.6em) rotate(-45deg); }
.btn.leftArrow > span > span { width: 1.8em; height: 0.4em; transform: translate(0.2em,0.8em); }
.btn.leftArrow > span > span.s2 { transform-origin: 0 100%; width: 1.4em; transform: translate(0,0.6em) rotate(45deg); }
.btn.leftArrow > span > span.s3 { transform-origin: 0 0; width: 1.4em; transform: translate(0,1em) rotate(-45deg); }
.btn.checked > span > span { width: 1em; height: 0.4em; transform-origin: 100% 100%; transform: translate(-0.3em,1.4em) rotate(45deg); }
.btn.checked > span > span.s3 { width: 1.8em; transform-origin: 0 100%; transform: translate(0.7em,1.4em) rotate(-45deg); }
.btn.heart > span > span { width: 1em; height: 1.7em; top: 0.2em; left: 1em; transform-origin: 0 100%; transform: rotate(-45deg); border-radius: 1em 1em 0 0; }
.btn.heart > span > span.s3 { transform-origin: 100% 100%; left: 0em; transform: rotate(45deg); }
header.grey .btn span span { background-color: #9e9e9e; }
header.indigo .btn span span { background-color: #3f51b5; }
header.cyan .btn span span { background-color: #00bcd4; }
header.lightGreen .btn span span { background-color: #8bc34a; }
header.amber .btn span span { background-color: #ffc107; }
.drop { display: block; position: absolute; background: #CCC; border-radius: 100%; transform: scale(0); pointer-events: none; width: 100%; height: 100%; }
.drop:before { display: block; position: absolute; content: ""; background-color: #EEE; border-radius: 100%; width: 100%; height: 100%; top: 0; left: 0; transform: scale(0); }
.drop.animate { animation: drop 1s ease-out; }
.drop.animate:before { animation: drop2 1s ease-out; }
@keyframes drop {
  100% { opacity: 0; transform: scale(2.5); }
}
@keyframes drop2 {
  30% { opacity: 1; transform: scale(0); }
  100% { opacity: 0; transform: scale(2.5); }
}
$(document).ready(function() {
	var classes = '';
	$('input[type=radio][name=button]').each(function() {
		classes += this.value+' ';
	});
	$('input[type=radio][name=button]').change(function() {
		$('header > .btn').removeClass(classes).addClass('btn '+this.value);
	});
	$('input[type=radio][name=size]').change(function() {
		$('body').removeClass().addClass(this.value);
	});
	$('input[type=radio][name=color]').change(function() {
		$('header').removeClass().addClass(this.value);
	});
	$('#next').click(function(event) {
		event.preventDefault();
		$('input:checked[type=radio][name=button]').parent().next().find('input').click();
	})
	$('#prev').click(function(event) {
		event.preventDefault();
		$('input:checked[type=radio][name=button]').parent().prev().find('input').click();
	})
	$('header > .btn').click(function(event) {
		event.preventDefault();
		var randomEl = Math.floor((Math.random() * $('input[type=radio][name=button]').length));
		$('input:eq(' + randomEl + ')[type=radio][name=button]').click();
	})
	$(".btn").click(function(event){
		if($(this).find("b.drop").length == 0) { $(this).prepend("<b class='drop'></b>"); }
		drop = $(this).find("b.drop").removeClass("animate");
		x = event.pageX - drop.width()/2 - $(this).offset().left;
		y = event.pageY - drop.height()/2 - $(this).offset().top;
		drop.css({top: y+'px', left: x+'px'}).addClass("animate");
	})

});

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