Permalink
Browse files

Added initial HTML and CSS

index.html and style.css
  • Loading branch information...
Kvaibhav01 committed Dec 28, 2017
1 parent ce4c43b commit 4fd39b0f98be25bd6f33dea76ca77c3cc5daf4ee
Showing with 58 additions and 0 deletions.
  1. +13 −0 demo/index.html
  2. +45 −0 demo/style.css
@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Ripple effect</title>
</head>
<body>
<div class="container">
<button class="btn ripple">Click here</button>
</div>
</body>
</html>
@@ -0,0 +1,45 @@
.container
{
background-color: #c1c1c1;
height: 500px;
display: flex;
justify-content: center;
align-items: center;
}
.btn
{
background-color: orange;
color: #fff;
font-size: 40px;
padding: 20px 20px;
}
/*Create ripple effec*/
.ripple {
position: relative;
overflow: hidden;
transform: translate3d(0, 0, 0);
}
.ripple:after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
background-repeat: no-repeat;
background-position: 50%;
transform: scale(10, 10);
opacity: 0;
transition: transform .5s, opacity 1s;
}
.ripple:active:after {
transform: scale(0, 0);
opacity: .3;
transition: 0s;
}

0 comments on commit 4fd39b0

Please sign in to comment.