<!--  
  This is a showcase with additional stuff for advanced shinyness.
  Please checkout the original pen for a minimal solution:
    https://codepen.io/Shackles/pen/zYKXGez
-->

<div class="container">

  <button class="ripple">A button</button>

  <div class="ripple">A div</div>

  <input class="ripple" placeholder="An input" />

  <table class="ripple">
    <tr>
      <th>What</th>
      <th>the</th>
      <th>heck</th>
    </tr>
    <tr>
      <td>Yup</td>
      <td>it</td>
      <td>even</td>
    </tr>
    <tr>
      <td>works</td>
      <td>in</td>
      <td>tables</td>
    </tr>
  </table>

</div>
@import url(https://fonts.googleapis.com/css?family=Exo);

:root {
  /* these are used in JS as well! */
  --bg-color: rgba(46, 161, 182, 0.25);
  --ripple-color: #2ea1b6;
}

html {
  font-family: "Exo", sens-serif;
}

body {
  background: linear-gradient(180deg, #040f11 0%, #162b30 100%);
  color: #dcf3ff;
  height: 100vh;
}

.container {
  display: flex;
  align-items: center;
  justify-content: space-around;

  width: 100%;
  height: 100%;
}

.ripple {
  background-color: var(--bg-color);
}

button {
  font-weight: 600;
  color: inherit;
  text-transform: uppercase;
  border: 1px solid #6e92a0;
  padding: 12px;
}

div.ripple {
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}

input {
  color: inherit;
  border: 1px solid #6e92a0;
  padding: 8px;
}

input::placeholder {
  color: inherit;
}

table {
  border: 1px solid #6e92a0;
  border-collapse: collapse;
  border-spacing: 10px;
}

td,
th {
  padding: 10px;
}
const rippleElements = document.getElementsByClassName("ripple");

for (let i = 0; i < rippleElements.length; i++) {
  const element = rippleElements[i];

  element.addEventListener("mousemove", (e) => {
    const rect = element.getBoundingClientRect();
    const x = ((e.clientX - rect.left) / element.clientWidth) * 100;
    const y = ((e.clientY - rect.top) / element.clientHeight) * 100;

    element.style.background = `radial-gradient(circle closest-corner 
    at ${x}% ${y}%,
    var(--ripple-color), var(--bg-color))`;
  });

  element.addEventListener("mouseleave", (event) => {
    element.style.removeProperty("background");
  });
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.