Google Material Buttons

by Haze32

HTML

<section class="">
  <div>

    <h2 >
      <a href="/movie/19995-avatar">Avatar</a>
      <span class="tag release_date">(2009)</span>
    </h2>

    <div class="facts">


      <span class="certification">
        PG-13
      </span>

      <span class="release">
        12/18/2009 (US)
      </span>


      <span class="genres">
        <a href="/genre/28-action/movie">Action</a>,&nbsp;<a href="/genre/12-adventure/movie">Adventure</a>,&nbsp;<a href="/genre/14-fantasy/movie">Fantasy</a>,&nbsp;<a href="/genre/878-science-fiction/movie">Science Fiction</a>
      </span>

      <span class="runtime">
        2h 42m
      </span>
    </div>

  </div>


  <ul class="auto actions">

    <li class="chart">
      <div class="consensus details">
        <div class="outer_ring">
          <div class="user_score_chart" data-percent="76.0" data-track-color="#204529" data-bar-color="#21d07a">
            <div class="percent">
              <span class="icon icon-r76"></span>
            </div>
            <canvas height="60" width="60"></canvas>
          </div>
        </div>
      </div>
      <div class="text">User<br>Score</div>
    </li>

    <li class="tooltip use_tooltip list tooltip_hover" title="Add to list" data-role="tooltip">
      <a class="no_click" href="#"><span class="glyphicons_v2 thumbnails-list white"></span></a>
    </li>
    <li class="tooltip use_tooltip" title="Mark as favorite" data-role="tooltip">
      <a id="favourite" class="no_click add_to_account_list favourite" href="#"><span class="glyphicons_v2 heart white false"></span></a>
    </li>
    <li class="tooltip use_tooltip" title="Add to your watchlist" data-role="tooltip">
      <a id="watchlist" class="no_click add_to_account_list watchlist" href="#"><span class="glyphicons_v2 bookmark white false"></span></a>
    </li>
    <li class="tooltip use_tooltip rating tooltip_hover" title="Rate It!" data-role="tooltip">
      <a id="rate_it" class="no_click rating" href="#"><span...

SCSS

html {
	box-sizing: border-box;
}

*,
*::after,
*::before {
	box-sizing: inherit;
}

body {
    padding: 20px;
}

h2 {
    font-size: 18px;
    font-weight: bold;
    margin: 12px 0;
}

.paper-button {                
	display: inline-block;
	padding: 0;
	border: 0;
	position: relative; 
	vertical-align: middle; 
	text-align: center;
	text-decoration: none;
	white-space: nowrap;        
	cursor: pointer;
	font-weight: 200;
	text-transform: uppercase;
	outline: 0;
    font-size: 14px;
	
	& > span {
		display: block; 
    	position: relative;
    	overflow: hidden;
        padding: 8px 16px;
	}
}

.paper-button--raised {
	transition: all .2s ease-out;
	background-color: #FFF;

	&::before {
		box-shadow: 0px 3px 3px rgba(0,0,0,0.16);		
	}

	&::after {
		box-shadow: 0px 3px 3px rgba(0,0,0,0.23);
	}

	&::before,
	&::after {
		z-index: -1;
		position: absolute;
		display: block;
		content: ' ';
		width: 100%;
		height: 100%;
		top: 0px;
		left: 0px;
		margin: 0;
		padding: 0;		
	}

	&:hover,
	&.is-hover {
		// @todo
	}
}

.paper-button--flat {
	background: transparent;
	color: #333;
	
	&:hover,
	&.is-hover {
		background: rgba(0,0,0,0.075);
	}

	&.paper-button--primary {
		color: #00F;
	}
}

.paper-button--fab {
	border-radius: 50%;
	width: 64px;
	height: 64px;
    
    //@todo
}

.paper-button__ripple {
	display: block; 
	position: absolute;
	background: rgba(0,0,0,0.175);
	border-radius: 50%;
	transform: scale3d(0,0,0);	

	&.is-active {
		-webkit-animation: effect 0.5s ease-in-out;
		animation: effect 0.5s ease-in-out;
	}
}

@-webkit-keyframes effect {
	100% {
		opacity: 0;
		transform: scale3d(2.5,2.5,2.5);
	}
}

@keyframes effect {
	100% {
		opacity: 0;
		transform: scale3d(2.5,2.5,2.5);
	}
}

JavaScript

$(".paper-button span").click(function(e){
	var element, circle, d, x, y;

	element = $(this);
	
	if(element.find(".paper-button__ripple").length === 0) {
		element.prepend("<span class='paper-button__ripple'></span>");
	}
		
	circle = element.find(".paper-button__ripple");
	circle.removeClass("is-active");
	
	if(!circle.height() && !circle.width()) {
		d = Math.max(element.outerWidth(), element.outerHeight());
		circle.css({height: d, width: d});
	}
	
	x = e.pageX - element.offset().left - circle.width()/2;
	y = e.pageY - element.offset().top - circle.height()/2;
	
	circle.css({top: y+'px', left: x+'px'}).addClass("is-active");

	circle.bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function() {
		circle.removeClass('is-active');
		circle.css({});
	});
});