Creating hover effect for add to cart button

Store Design

Topic summary

A user wants to add a custom hover effect to their Add to Cart button on desktop that creates a lighter circle following the mouse cursor, similar to a Photoshop mockup they created. They’re using the Refresh theme and identify as a beginner needing detailed code placement instructions.

Two solutions were provided:

Solution 1 (abdussomod):

  • Add CSS to base.css creating a fixed custom cursor element with radial gradient
  • Insert JavaScript in theme.liquid before </body> to track mouse movement and toggle cursor visibility on button hover
  • Uses a separate cursor element that follows the mouse globally

Solution 2 (EmbedAny):

  • Add CSS to base.css using ::after pseudo-element positioned relative to the button
  • Insert JavaScript in theme.liquid to track mouse position using CSS custom properties (--x, --y)
  • Creates effect contained within the button itself rather than a separate element

Both solutions include @media queries to restrict the effect to desktop only (min-width: 768px). The approaches differ in implementation: one uses a floating cursor element, the other uses CSS pseudo-elements with dynamic positioning.

Summarized with AI on October 23. AI used: claude-sonnet-4-5-20250929.
1

Hey everyone, hope you are having a good day.
i want to create a hover effect to my add to cart button (only on desktop)
that will create a lighter circle around the user’s mouse (like in the reference i created)
the reference is created in photoshop so there is no reference link.
the store link is : breshofficial . com

theme: Refresh, Product form submit

2

Hey Bresh_store Hope you’re having a great day too!

You can totally create a hover effect that shows a soft light circle around the mouse when hovering over your Add to Cart button and we’ll make sure it works only on desktop. No app needed just a little custom code. Here’s a step-by-step guide (don’t worry, I’ve made it beginner-friendly):

How to do it (Step-by-Step)

1. Go to your Shopify Admin:

Online Store > Themes > … > Edit Code

2. Open the file:

Assets > base.css (or theme.css if you don’t see base.css)

Scroll to the bottom and paste this CSS:

@media screen and (min-width: 768px) {
  .custom-cursor {
    position: fixed;
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 9999;
    transition: opacity 0.3s ease;
    opacity: 0;
  }

  .add-to-cart-hovered .custom-cursor {
    opacity: 1;
  }
}

3. Now open:

Layout > theme.liquid

Scroll to the very bottom and paste this right before </body>:

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const cursor = document.createElement("div");
    cursor.classList.add("custom-cursor");
    document.body.appendChild(cursor);

    const updateCursorPosition = (e) => {
      cursor.style.left = e.clientX + "px";
      cursor.style.top = e.clientY + "px";
    };

    document.addEventListener("mousemove", updateCursorPosition);

    const addToCartButtons = document.querySelectorAll('form[action*="/cart/add"] button[type="submit"]');

    addToCartButtons.forEach((btn) => {
      btn.addEventListener("mouseenter", () => {
        document.body.classList.add("add-to-cart-hovered");
      });
      btn.addEventListener("mouseleave", () => {
        document.body.classList.remove("add-to-cart-hovered");
      });
    });
  });
</script>

Now when you hover your Add to Cart button on desktop, you’ll see a nice soft light circle following the mouse.

If you’d like to tweak the color, size, or even add animation just let me know and I’ll help you fine-tune it.

If you’d ever like someone to handle these tweaks directly in your theme or help with more advanced stuff, feel free to DM me I specialize in Shopify customizations and I’m happy to support store owners like you!

Let me know how it goes
Happy building

3

Hi @Bresh_store

Step-by-step setup:

Step 1: Open your Shopify theme editor

  1. Go to Online Store → Themes.

  2. Click “…” → Edit code on your Refresh theme.

Step 2: Add custom CSS

  1. In the Assets folder, open base.css (or theme.css, depending on your theme).

  2. Scroll to the bottom and paste this code:

/* === Hover Circle Effect for Add to Cart (Desktop Only) === */
@media (min-width: 768px) {
  .product-form__submit {
    position: relative;
    overflow: hidden;
    z-index: 0;
  }

  .product-form__submit::after {
    content: "";
    position: absolute;
    top: var(--y, 50%);
    left: var(--x, 50%);
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 80%);
    border-radius: 50%;
    transition: width 0.3s ease, height 0.3s ease;
    pointer-events: none;
    z-index: -1;
  }

  .product-form__submit:hover::after {
    width: 200px;
    height: 200px;
  }
}

Step 3: Add the tracking script

  1. In the Layout folder, open theme.liquid.

  2. Just before the closing </body> tag, paste this:

<script>
document.addEventListener('mousemove', e => {
  document.querySelectorAll('.product-form__submit').forEach(btn => {
    const rect = btn.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    btn.style.setProperty('--x', `${x}px`);
    btn.style.setProperty('--y', `${y}px`);
  });
});
</script>

Step 4: Save and test

  1. Save all files.

  2. Go to your product page (desktop).

  3. Hover over the Add to Cart button — you should see a soft glowing light circle move with your cursor inside the button.

I hope this works! Please let me know if you run into any issues.