CodeMyUI/index.html

## index.html
<body>
  <div class="background"></div>
  <div>
    <div class="button"></div>
    <div class="button"></div>
    <div class="button"></div>
    <div class="button"></div>
  </div>
</body>

## material-design-bubble-animation.markdown

      
    Raw
  

              material-design-bubble-animation.markdown
            
          
    Material Design Bubble Animation

When a button is pressed, the background changes with the iconic Material Design animation. This can also be applied for other uses (buttons etc.).
A Pen by Ives van Hoorne on CodePen.
License.

  
## script.js
var btn = $('.button');
var background = $('.background');


var width = 0;
var height = 0;
var r = 0;
setSize();

function setSize() {
  width = $(window).width();
	height = $(window).height();
  r = Math.sqrt(width * width + height * height);
}
$(window).resize(setSize);

btn.click(function(e) {
  btn.removeClass('current');
  $(this).addClass('current');
  var circle = $("<div unselectable='on' id='circle'></div>");
  background.append(circle);
  circle.css({
    position: 'absolute',
    'background-color': $(this).css('background-color'),
    width: 0,
    height: 0,
    "border-radius": "50%",
    left: e.pageX,
    top: e.pageY,
    'margin-left': 0,
    'margin-top': 0,
    'webkit-user-select': 'none',
    '-moz-user-select': 'none',
    '-ms-user-select': 'none'
  });
  circle.animate({
    width: (r * 2),
    height: (r * 2),
   	'margin-left': -r,
    'margin-top': -r
  }, {
    duration: 600,
    easing: "easeInOutCubic",
    queue: false,
    complete: function() {
     circle.parent().css('background-color',
                    $(this).css('background-color'));
     circle.detach();
    }
  });
});

## scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

## style.scss
@import url(https://fonts.googleapis.com/css?family=Roboto);

$color1: #189FFF;
$color2: #FF440D;
$color3: #14C239;
$color4: #9121E8;

html body {
  font-family: 'Roboto', sans-serif;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #f5f5f5;
}

.background {
  position: fixed;
  width: 100%;
  height: 100%;
}

$button-width: 100px;
$button-height: 50px;
$button-margin: 50px;

@mixin button-style($i, $color, $top, $bottom, $left, $right) {
  &:nth-child(#{$i}) {
    @if $left != 0  {left: $left * $button-margin;}
    @if $right != 0 {right: $right * $button-margin;}
    @if $bottom != 0 {bottom: $bottom * $button-margin;}
    @if $top != 0 {top: $top * $button-margin;}
    background-color: $color;
    &:after {
      content: '' + $color;
    }
  }
}

.button {
  transition: 0.3s ease all;
  display: block;
  text-align: center;
  position: fixed;
  cursor: pointer;
  width: $button-width;
  height: $button-height;
  box-shadow: 0 3px 17px 0 rgba(0, 0, 0, 0.2);

  @for $i from 1 through 4 {
    @if $i == 1 {
      @include button-style($i, $color1, 1, 0, 1, 0);
    } @else if $i == 2 {
      @include button-style($i, $color2, 1, 0, 0, 1);
    } @else if $i == 3 {
      @include button-style($i, $color3, 0, 1, 1, 0);
    } @else if $i == 4 {
      @include button-style($i, $color4, 0, 1, 0, 1);
    }
  }

  &:hover {
    transition: 0.3s ease all;
    box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
  }

  &:after {
    font-size: 18px;
    color: white;
    line-height: $button-height;
  }

  &:active {
    transition: 0.3s ease all;
    border: none;
    box-shadow: none;
    transform: none;
  }

  &.current {
    transition: 0.3s ease all;
    border: none;
    box-shadow: none;
    pointer-events: none;
  }
}

## styles
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
	<body>
	<div class="background"></div>
	<div>
	<div class="button"></div>
	<div class="button"></div>
	<div class="button"></div>
	<div class="button"></div>
	</div>
	</body>
	var btn = $('.button');
	var background = $('.background');


	var width = 0;
	var height = 0;
	var r = 0;
	setSize();

	function setSize() {
	width = $(window).width();
	height = $(window).height();
	r = Math.sqrt(width * width + height * height);
	}
	$(window).resize(setSize);

	btn.click(function(e) {
	btn.removeClass('current');
	$(this).addClass('current');
	var circle = $("<div unselectable='on' id='circle'></div>");
	background.append(circle);
	circle.css({
	position: 'absolute',
	'background-color': $(this).css('background-color'),
	width: 0,
	height: 0,
	"border-radius": "50%",
	left: e.pageX,
	top: e.pageY,
	'margin-left': 0,
	'margin-top': 0,
	'webkit-user-select': 'none',
	'-moz-user-select': 'none',
	'-ms-user-select': 'none'
	});
	circle.animate({
	width: (r * 2),
	height: (r * 2),
	'margin-left': -r,
	'margin-top': -r
	}, {
	duration: 600,
	easing: "easeInOutCubic",
	queue: false,
	complete: function() {
	circle.parent().css('background-color',
	$(this).css('background-color'));
	circle.detach();
	}
	});
	});
	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
	@import url(https://fonts.googleapis.com/css?family=Roboto);

	$color1: #189FFF;
	$color2: #FF440D;
	$color3: #14C239;
	$color4: #9121E8;

	html body {
	font-family: 'Roboto', sans-serif;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background-color: #f5f5f5;
	}

	.background {
	position: fixed;
	width: 100%;
	height: 100%;
	}

	$button-width: 100px;
	$button-height: 50px;
	$button-margin: 50px;

	@mixin button-style($i, $color, $top, $bottom, $left, $right) {
	&:nth-child(#{$i}) {
	@if $left != 0 {left: $left * $button-margin;}
	@if $right != 0 {right: $right * $button-margin;}
	@if $bottom != 0 {bottom: $bottom * $button-margin;}
	@if $top != 0 {top: $top * $button-margin;}
	background-color: $color;
	&:after {
	content: '' + $color;
	}
	}
	}

	.button {
	transition: 0.3s ease all;
	display: block;
	text-align: center;
	position: fixed;
	cursor: pointer;
	width: $button-width;
	height: $button-height;
	box-shadow: 0 3px 17px 0 rgba(0, 0, 0, 0.2);

	@for $i from 1 through 4 {
	@if $i == 1 {
	@include button-style($i, $color1, 1, 0, 1, 0);
	} @else if $i == 2 {
	@include button-style($i, $color2, 1, 0, 0, 1);
	} @else if $i == 3 {
	@include button-style($i, $color3, 0, 1, 1, 0);
	} @else if $i == 4 {
	@include button-style($i, $color4, 0, 1, 0, 1);
	}
	}

	&:hover {
	transition: 0.3s ease all;
	box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.2);
	transform: translateY(-2px);
	}

	&:after {
	font-size: 18px;
	color: white;
	line-height: $button-height;
	}

	&:active {
	transition: 0.3s ease all;
	border: none;
	box-shadow: none;
	transform: none;
	}

	&.current {
	transition: 0.3s ease all;
	border: none;
	box-shadow: none;
	pointer-events: none;
	}
	}