Custom Cursor That Interacts With Buttons – Wobbly Buttons

Preview:

Description:

The Wobbly-Buttons JavaScript library allows you to create a custom, interactive cursor on the page.

As your cursor hovers over a button, the library expands the cursor to match the button’s shape. This visual cue creates a sense of connection between the cursor and the button, making your visitors feel like the button is sticking to their cursor.

How to use it:

1. Download and insert the WobblyButtons.js script into the document.

<script src="WobblyButtons.js"></script>

2. Initialize the Wobbly Buttons on document ready.

addEventListener("DOMContentLoaded", (event) => {
  wobblyButtonsInit();
});

3. Create a wobbly button on the page.

<div class="wobbly-button-container">
  <button class="wobbly-button">Hover Me!</button>
</div>

4. Available options to customize the custom cursor.

wobblyButtonsInit(
  height = "16px",
  width = "16px",
  bigHeight = "50px",
  bigWidth = "50px",
  opacity = "75%",
  bigOpacity = "25%",
  backgroundColor = "#000000aa",
  boxShadow = "0 0 6px #000000",
  startStopDuration = "0.2s",
  zIndex = "2000",
  borderRadius = "50%",
  bigBorderRadius = "25px",
  transition = "width 0.3s, height 0.3s, border-radius 0.3s, opacity 0.3s, background-color 0.3s"
)