Fostrap - Tutorial how to make button material design, because the material has its own style and design I think is very good and simple.
The HTML
<!DOCTYPE html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="msapplication-tap-highlight" content="no">
<meta name="description" content="Material Design Button Ripple Effect Snippet">
<title>Material Design Button Ripple Effect</title>
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
</head>
<body>
<div class="header">
<h1 class="title">Material Design Button Ripple Effect</h1>
</div>
<div class="container btn-space">
<a class="ripple red" href="#">Button</a>
<a class="ripple pink" href="#">Button</a>
<a class="ripple blue" href="#">Button</a>
<a class="ripple cyan" href="#">Button</a>
<a class="ripple teal" href="#">Button</a>
<a class="ripple yellow" href="#">Button</a>
<a class="ripple orange" href="#">Button</a>
<a class="ripple brown" href="#">Button</a>
<a class="ripple grey" href="#">Button</a>
<a class="ripple black" href="#">Button</a>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>
The CSS
body {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
}
.header {
background-color: #2196F3;padding:55px 0px;text-align:center;margin-bottom: 10px;
}
.header > .title {
line-height: 48px;
font-size: 48px;color: #FFF;margin-top: 0px;margin-bottom: 0px;
}
@media only screen and (min-width: 993px) {
.container {
width: 85%;
}
}
@media only screen and (min-width: 993px) {
.container {
width: 70%;
}
}
@media only screen and (min-width: 601px) {
.container {
width: 85%;
}
}
.container {
margin: 0 auto;
max-width: 1280px;
width: 90%;
}
.btn-space{
text-align: center;
}
.ripple {
text-align: center;
display: inline-block;
padding: 8px 30px;
border-radius: 2px;
letter-spacing: .5px;
border-radius: 2px;
text-decoration: none;
color: #fff;
overflow: hidden;
position: relative;
z-index: 0;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.ripple:hover {
box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
}
.ink {
display: block;
position: absolute;
background: rgba(255, 255, 255, 0.4);
border-radius: 100%;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
}
.animate {
-webkit-animation: ripple 0.55s linear;
-moz-animation: ripple 0.55s linear;
-ms-animation: ripple 0.55s linear;
-o-animation: ripple 0.55s linear;
animation: ripple 0.55s linear;
}
@-webkit-keyframes ripple {
100% {
opacity: 0;
-webkit-transform: scale(2.5);
}
}
@-moz-keyframes ripple {
100% {
opacity: 0;
-moz-transform: scale(2.5);
}
}
@-o-keyframes ripple {
100% {
opacity: 0;
-o-transform: scale(2.5);
}
}
@keyframes ripple {
100% {
opacity: 0;
transform: scale(2.5);
}
}
.red {
background-color: #F44336;
}
.pink {
background-color: #E91E63;
}
.blue {
background-color: #2196F3;
}
.cyan {
background-color: #00bcd4;
}
.teal {
background-color: #009688;
}
.yellow {
background-color: #FFEB3B;
color: #000;
}
.orange {
background-color: #FF9800;
}
.brown {
background-color: #795548;
}
.grey {
background-color: #9E9E9E;
}
.black {
background-color: #000000;
}
The Javascript
$(function() {
var ink, d, x, y;
$(".ripple").click(function(e) {
if ($(this).find(".ink").length === 0) {
$(this).prepend("<span class='ink'></span>");
}
ink = $(this).find(".ink");
ink.removeClass("animate");
if (!ink.height() && !ink.width()) {
d = Math.max($(this).outerWidth(), $(this).outerHeight());
ink.css({
height: d,
width: d
});
}
x = e.pageX - $(this).offset().left - ink.width() / 2;
y = e.pageY - $(this).offset().top - ink.height() / 2;
ink.css({
top: y + 'px',
left: x + 'px'
}).addClass("animate");
});
});