GGrassiant · October 20, 2020 12:36
diff --git a/A. Simple JS - CSS Ripple effect on button.md b/A. Simple JS - CSS Ripple effect on button.md
diff --git a/button.css b/button.css
 html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
  box-sizing: border-box;
 }

 body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
 }

 button {
  position: relative;
  overflow: hidden;
  transition: background 400ms;
  color: #fff;
  background-color: #6200ee;
  padding: 1rem 2rem;
  font-family: 'Roboto', sans-serif;
  font-size: 1.5rem;
  outline: 0;
  border: 0;
  border-radius: 0.25rem;
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.3); /* black with 30% opacity */
  cursor: pointer;
 }

 span.ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  animation: ripple 600ms linear;
  background-color: rgba(255, 255, 255, 0.7);
 }

 @keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
 }
diff --git a/index.html b/index.html
 <!doctype html>
 <html class="no-js" lang="">

 <head>
  <meta charset="utf-8">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <meta property="og:title" content="">
  <meta property="og:type" content="">
  <meta property="og:url" content="">
  <meta property="og:image" content="">

  <link rel="manifest" href="site.webmanifest">
  <link rel="apple-touch-icon" href="icon.png">
  <!-- Place favicon.ico in the root directory -->

  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/main.css">

  <meta name="theme-color" content="#fafafa">
 </head>

 <body>

  <!-- Add your site or application content here -->
  <button>Find out more</button>
  <script src="js/vendor/modernizr-3.11.2.min.js"></script>
  <script src="js/plugins.js"></script>
  <script src="js/main.js"></script>
 </body>

 </html>
diff --git a/main.js b/main.js
 class Button {
  constructor(HTMLButtonElement) {
    this.button = HTMLButtonElement;
    this.left = this.button.offsetLeft;
    this.top = this.button.offsetTop;
    this.createRipple();
  }

  createRipple() {
    this.button.addEventListener("click", (event) => {
      const circle = document.createElement("span");
      const diameter = Math.max(
        this.button.clientWidth,
        this.button.clientHeight
      );
      const radius = diameter / 2;

      const offsetLeft = event.clientX - this.left;
      const offsetTop = event.clientY - this.top;

      circle.style.width = circle.style.height = `${diameter}px`;
      circle.style.left = `${offsetLeft - radius}px`;
      circle.style.top = `${offsetTop - radius}px`;
      circle.classList.add("ripple");

      const ripple = this.button.getElementsByClassName("ripple")[0];

      if (ripple) {
        ripple.remove();
      }

      this.button.appendChild(circle);
    });
  };
 }

 const buttons = document.getElementsByTagName("button");
 for (const button of buttons) {
  new Button(button);
 }
	html {
	color: #222;
	font-size: 1em;
	line-height: 1.4;
	box-sizing: border-box;
	}

	body {
	height: 100vh;
	margin: 0;
	display: grid;
	place-items: center;
	overflow: hidden;
	}

	button {
	position: relative;
	overflow: hidden;
	transition: background 400ms;
	color: #fff;
	background-color: #6200ee;
	padding: 1rem 2rem;
	font-family: 'Roboto', sans-serif;
	font-size: 1.5rem;
	outline: 0;
	border: 0;
	border-radius: 0.25rem;
	box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.3); /* black with 30% opacity */
	cursor: pointer;
	}

	span.ripple {
	position: absolute;
	border-radius: 50%;
	transform: scale(0);
	animation: ripple 600ms linear;
	background-color: rgba(255, 255, 255, 0.7);
	}

	@keyframes ripple {
	to {
	transform: scale(4);
	opacity: 0;
	}
	}
	<!doctype html>
	<html class="no-js" lang="">

	<head>
	<meta charset="utf-8">
	<title></title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<meta property="og:title" content="">
	<meta property="og:type" content="">
	<meta property="og:url" content="">
	<meta property="og:image" content="">

	<link rel="manifest" href="site.webmanifest">
	<link rel="apple-touch-icon" href="icon.png">
	<!-- Place favicon.ico in the root directory -->

	<link rel="stylesheet" href="css/normalize.css">
	<link rel="stylesheet" href="css/main.css">

	<meta name="theme-color" content="#fafafa">
	</head>

	<body>

	<!-- Add your site or application content here -->
	<button>Find out more</button>
	<script src="js/vendor/modernizr-3.11.2.min.js"></script>
	<script src="js/plugins.js"></script>
	<script src="js/main.js"></script>
	</body>

	</html>
	class Button {
	constructor(HTMLButtonElement) {
	this.button = HTMLButtonElement;
	this.left = this.button.offsetLeft;
	this.top = this.button.offsetTop;
	this.createRipple();
	}

	createRipple() {
	this.button.addEventListener("click", (event) => {
	const circle = document.createElement("span");
	const diameter = Math.max(
	this.button.clientWidth,
	this.button.clientHeight
	);
	const radius = diameter / 2;

	const offsetLeft = event.clientX - this.left;
	const offsetTop = event.clientY - this.top;

	circle.style.width = circle.style.height = `${diameter}px`;
	circle.style.left = `${offsetLeft - radius}px`;
	circle.style.top = `${offsetTop - radius}px`;
	circle.classList.add("ripple");

	const ripple = this.button.getElementsByClassName("ripple")[0];

	if (ripple) {
	ripple.remove();
	}

	this.button.appendChild(circle);
	});
	};
	}

	const buttons = document.getElementsByTagName("button");
	for (const button of buttons) {
	new Button(button);
	}