Gravity button

gravity-button.markdown

Gravity button

A Pen by Amit Sheen on CodePen.

License.

index.html

<div class="gravityButton">
  <button style="--color: hotpink;">
    <svg class="buttonIcon" viewBox="0 0 512 512" title="bath">
      <path d="M32,384a95.4,95.4,0,0,0,32,71.09V496a16,16,0,0,0,16,16h32a16,16,0,0,0,16-16V480H384v16a16,16,0,0,0,16,16h32a16,16,0,0,0,16-16V455.09A95.4,95.4,0,0,0,480,384V336H32ZM496,256H80V69.25a21.26,21.26,0,0,1,36.28-15l19.27,19.26c-13.13,29.88-7.61,59.11,8.62,79.73l-.17.17A16,16,0,0,0,144,176l11.31,11.31a16,16,0,0,0,22.63,0L283.31,81.94a16,16,0,0,0,0-22.63L272,48a16,16,0,0,0-22.62,0l-.17.17c-20.62-16.23-49.83-21.75-79.73-8.62L150.22,20.28A69.25,69.25,0,0,0,32,69.25V256H16A16,16,0,0,0,0,272v16a16,16,0,0,0,16,16H496a16,16,0,0,0,16-16V272A16,16,0,0,0,496,256Z" />
    </svg>
  </button>
</div>

<div class="gravityButton">
  <button style="--color: aquamarine;">
    <svg class="buttonIcon" viewBox="0 0 512 512" title="poo">
      <path d="M451.4 369.1C468.7 356 480 335.4 480 312c0-39.8-32.2-72-72-72h-14.1c13.4-11.7 22.1-28.8 22.1-48 0-35.3-28.7-64-64-64h-5.9c3.6-10.1 5.9-20.7 5.9-32 0-53-43-96-96-96-5.2 0-10.2.7-15.1 1.5C250.3 14.6 256 30.6 256 48c0 44.2-35.8 80-80 80h-16c-35.3 0-64 28.7-64 64 0 19.2 8.7 36.3 22.1 48H104c-39.8 0-72 32.2-72 72 0 23.4 11.3 44 28.6 57.1C26.3 374.6 0 404.1 0 440c0 39.8 32.2 72 72 72h368c39.8 0 72-32.2 72-72 0-35.9-26.3-65.4-60.6-70.9zM192 256c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm159.5 139C341 422.9 293 448 256 448s-85-25.1-95.5-53c-2-5.3 2-11 7.8-11h175.4c5.8 0 9.8 5.7 7.8 11zM320 320c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32z" />
    </svg>
  </button>
</div>

<div class="gravityButton">
  <button style="--color: gold;">
    <svg class="buttonIcon" viewBox="0 -50 416 562" title="golf-ball">
      <path d="M96 416h224c0 17.7-14.3 32-32 32h-16c-17.7 0-32 14.3-32 32v20c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-20c0-17.7-14.3-32-32-32h-16c-17.7 0-32-14.3-32-32zm320-208c0 74.2-39 139.2-97.5 176h-221C39 347.2 0 282.2 0 208 0 93.1 93.1 0 208 0s208 93.1 208 208zm-180.1 43.9c18.3 0 33.1-14.8 33.1-33.1 0-14.4-9.3-26.3-22.1-30.9 9.6 26.8-15.6 51.3-41.9 41.9 4.6 12.8 16.5 22.1 30.9 22.1zm49.1 46.9c0-14.4-9.3-26.3-22.1-30.9 9.6 26.8-15.6 51.3-41.9 41.9 4.6 12.8 16.5 22.1 30.9 22.1 18.3 0 33.1-14.9 33.1-33.1zm64-64c0-14.4-9.3-26.3-22.1-30.9 9.6 26.8-15.6 51.3-41.9 41.9 4.6 12.8 16.5 22.1 30.9 22.1 18.3 0 33.1-14.9 33.1-33.1z" />
    </svg>
  </button>
</div>

script.js

document.querySelectorAll('.gravityButton').forEach(btn => {
  
  btn.addEventListener('mousemove', (e) => {
    
    const rect = btn.getBoundingClientRect();    
    const h = rect.width / 2;
    
    const x = e.clientX - rect.left - h;
    const y = e.clientY - rect.top - h;

    const r1 = Math.sqrt(x*x+y*y);
    const r2 = (1 - (r1 / h)) * r1;

    const angle = Math.atan2(y, x);
    const tx = Math.round(Math.cos(angle) * r2 * 100) / 100;
    const ty = Math.round(Math.sin(angle) * r2 * 100) / 100;
    
    const op = (r2 / r1) + 0.25;

    btn.style.setProperty('--tx', `${tx}px`);
    btn.style.setProperty('--ty', `${ty}px`);
    btn.style.setProperty('--opacity', `${op}`);
  });

  btn.addEventListener('mouseleave', (e) => {
    btn.style.setProperty('--tx', '0px');
    btn.style.setProperty('--ty', '0px');
    btn.style.setProperty('--opacity', `${0.25}`);
  });
})

scripts

<script src="https://assets.codepen.io/1948355/twitterButton-2.1.0.js"></script>

style.scss

*, *::before, *::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
  background-color: #111;
  color: #fff;
  min-height: 100vh;
  display: flex;
  place-items: center;
  justify-content: center;
}

.gravityButton {
  display: grid;
  place-items: center;
  width: 192px;
  aspect-ratio: 1;
  border-radius: 50%;
  // border: 1px dashed #fff2;
  
  & > button {
    font: inherit;
    width: 64px;
    aspect-ratio: 1;
    background: none;
    border-radius: 50%;
    border: 2px solid #fff;
    transform: translate(var(--tx, 0), var(--ty, 0));
    opacity: var(--opacity, 0.25);
    cursor: pointer;
    transition: all 0.2s ease-out;
    
    &:hover, &:focus-visible {
      --_fill: var(--color, #fff);
    }
    
    &:focus-visible {
      outline: 2px solid #fff;
      outline-offset: 2px;
      opacity: 1;
    }
  }
}

.buttonIcon {
  width: 50%;
  fill: var(--_fill, #fff);
  transition: fill 0.3s;
}