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");
});
});
Subscribe to our Newsletter
Wisnu ST
Yo! I'm Wisnu ST.
I'm surfers search engine. I'm blogger. I'm cat lovers. Im everywhere.
I'm based in Tangerang, Hire me!
HTML coding can really be complicated and frustrating for non programmers like me, but this material design button ripple effect will definitely boost my trust my paper review website to the next level, so I'm giving it a try.
ReplyDeleteGreat article! By the way, are you updating your site? I have some useful resources from procustomwriting.com that you might like. Let me know if you want to check them out.
ReplyDeleteI really enjoyed very much with this article here. Really its an amazing article that i have ever read. Teen Titans Go Games
ReplyDelete