MUI Gradient Tracked Button

Question

MUI Gradient Tracked Button

Take a look at this Codepen example I created. It showcases a hover effect where the gradient follows the mouse cursor.

In order to achieve this effect, I have defined two CSS variables - --x and --y, to keep track of the mouse position on the button. The --size CSS variable is responsible for adjusting the dimensions of the gradient.

The gradient is generated using the rule

background: radial-gradient(circle closest-side, pink, transparent)

which ensures it appears correctly on the button.

To make this work, I used functions like Document.querySelector() and EventTarget.addEventListener() to handle the 'mousemove' event. Additionally, Element.getBoundingClientRect() and

CSSStyleDeclaration.setProperty()

are employed to update the values of --x and --y CSS variables dynamically.

Now, my next challenge is to recreate this effect as a styled component in React Typescript utilizing MUI Button. I attempted to declare the necessary CSS styles within my styled Button component, however, it seems they are not being applied properly.

Button.tsx

import React from 'react';
import { styled, Theme } from '@mui/material/styles';
import { Button, SxProps } from '@mui/material';

const HoverButton = styled(Button)(({ theme }) => ({
    borderRadius: 100,
    ".mouse-cursor-gradient-tracking": {
        position: "relative",
        background: "#7983ff",
        padding: "0.5rem 1rem",
        fontSize: "1.2rem",
        border: "none",
        color: theme.palette.secondary.contrastText,
        cursor: "pointer",
        outline: "none",
        overflow: "hidden",
      },
      
      ".mouse-cursor-gradient-tracking span": {
        position: "relative",
      },
      
      ".mouse-cursor-gradient-tracking:before": {
        --size: 0,
        content: '',
        position: "absolute",
        left: "var(--x)",
        top: "var(--y)",
        width: "var(--size)",
        height: "var(--size)",
        background: "radial-gradient(circle closest-side, pink, transparent)",
        transform: "translate(-50%, -50%)",
        transition: "width 0.2s ease, height 0.2s ease",
      },
      
      ".mouse-cursor-gradient-tracking:hover:before": {
        "--size": "200px"
      },
}));

export function SubmitButton(props: { children: React.ReactNode; sx?: SxProps<Theme> }) {
    let button:<Element | null> = document.querySelector('.mouse-cursor-gradient-tracking');
    button.addEventListener('mousemove', e => {
        let rect = e.target.getBoundingClientRect();
        let x = e.clientX - rect.left;
        let y = e.clientY - rect.top;
        button.style.setProperty('--x', x + 'px');
        button.style.setProperty('--y', y + 'px');
    });

    return (
        <HoverButton type="submit" variant="contained" sx={props.sx}>
            {props.children}<span>Hover me</span>
        </HoverButton>
    );
}

javascript css reactjs typescript material-ui

Answer 1

Answer №1

Check out this interactive sandbox for a demonstration.

Now, let me highlight some areas where improvements can be made in your current approach.

Your current method involves imperatively selecting the button by class and adding an event handler manually. Here is how you can do it using React:

    let button:<Element | null> = document.querySelector('.mouse-cursor-gradient-tracking');
    button.addEventListener('mousemove', e => {
        let rect = e.target.getBoundingClientRect();
        let x = e.clientX - rect.left;
        let y = e.clientY - rect.top;
        button.style.setProperty('--x', x + 'px');
        button.style.setProperty('--y', y + 'px');
    });

You can simplify this by directly adding an event handler to a button component in React, allowing React to manage the event handling.

const Component = () => {

  const mouseDownHandler = (e) => {
    // add your logic here
  }
  
 return (<button onMouseDown={mouseDownHandler}>Click me</button>);
};

Avoid mixing classes with styled or css-in-js.

const HoverButton = styled(Button)(({ theme }) => ({
    ".mouse-cursor-gradient-tracking": {
        position: "relative",
        background: "#7983ff",
      },
    ".mouse-cursor-gradient-tracking span": {
        position: "relative",
      },
      
      ".mouse-cursor-gradient-tracking:before": {
        --size: 0,
        content: '',
      },
      
      ".mouse-cursor-gradient-tracking:hover:before": {
        "--size": "200px"
      },
}));

Simplify this by using direct CSS styling within your button component:

const HoverButton = styled(Button)`  
  position: relative;
  background: #7983ff;

  & > span {
    ... include your code here
  }

  &:before {
   ... include your code here
  }
  
  &:hover:before {
   ... include your code here
  } 
`;

const SubmitButton = () => {
 return <HoverButton>Text</HoverButton>
}

This way, the styles will be directly applied to the button with the pseudo-classes without the need for a separate custom class unless necessary.

For dynamically updating styles, avoid manual style updates and utilize state management instead:

button.addEventListener('mousemove', e => {
  ...include other codes
  button.style.setProperty('--x', x + 'px');
  button.style.setProperty('--y', y + 'px');
});

To achieve dynamic updates, use state in conjunction with event handlers as demonstrated in point no. 1. This way, you can update the CSS values based on state changes.

Here's the complete revised code for reference.

import { useState } from "react";
import { styled, Theme } from "@mui/material/styles";

// Rest of the code omitted for brevity

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <SubmitButton />
    </div>
  );
}

Find more resources at: MUI styled(), Styled component props

Answer 2

Check out this interactive sandbox for a demonstration.

Now, let me highlight some areas where improvements can be made in your current approach.

Your current method involves imperatively selecting the button by class and adding an event handler manually. Here is how you can do it using React:

    let button:<Element | null> = document.querySelector('.mouse-cursor-gradient-tracking');
    button.addEventListener('mousemove', e => {
        let rect = e.target.getBoundingClientRect();
        let x = e.clientX - rect.left;
        let y = e.clientY - rect.top;
        button.style.setProperty('--x', x + 'px');
        button.style.setProperty('--y', y + 'px');
    });

You can simplify this by directly adding an event handler to a button component in React, allowing React to manage the event handling.

const Component = () => {

  const mouseDownHandler = (e) => {
    // add your logic here
  }
  
 return (<button onMouseDown={mouseDownHandler}>Click me</button>);
};

Avoid mixing classes with styled or css-in-js.

const HoverButton = styled(Button)(({ theme }) => ({
    ".mouse-cursor-gradient-tracking": {
        position: "relative",
        background: "#7983ff",
      },
    ".mouse-cursor-gradient-tracking span": {
        position: "relative",
      },
      
      ".mouse-cursor-gradient-tracking:before": {
        --size: 0,
        content: '',
      },
      
      ".mouse-cursor-gradient-tracking:hover:before": {
        "--size": "200px"
      },
}));

Simplify this by using direct CSS styling within your button component:

const HoverButton = styled(Button)`  
  position: relative;
  background: #7983ff;

  & > span {
    ... include your code here
  }

  &:before {
   ... include your code here
  }
  
  &:hover:before {
   ... include your code here
  } 
`;

const SubmitButton = () => {
 return <HoverButton>Text</HoverButton>
}

This way, the styles will be directly applied to the button with the pseudo-classes without the need for a separate custom class unless necessary.

For dynamically updating styles, avoid manual style updates and utilize state management instead:

button.addEventListener('mousemove', e => {
  ...include other codes
  button.style.setProperty('--x', x + 'px');
  button.style.setProperty('--y', y + 'px');
});

To achieve dynamic updates, use state in conjunction with event handlers as demonstrated in point no. 1. This way, you can update the CSS values based on state changes.

Here's the complete revised code for reference.

import { useState } from "react";
import { styled, Theme } from "@mui/material/styles";

// Rest of the code omitted for brevity

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <SubmitButton />
    </div>
  );
}

Find more resources at: MUI styled(), Styled component props

MUI Gradient Tracked Button

Answer №1

Similar questions

Adjust the image's height to adapt to the size of the browser

Enhancing Redux in an Electron app using Sqlite3

A space designated for numerous receivers

Dynamic grid arrangement showcasing cells of varying heights

The CORS policy is preventing the AJAX request from functioning properly on localhost

A guide on loading modules dynamically using React and Typescript from a server

What is the best way to ensure that the same information is included on every page of

Is it necessary to only override the monospaced font?

Create a class for the grandparent element

Optimal methods for handling Ajax requests in the present day

Items in the Vue.Draggable display can be arranged on both the left and right

Error: Attempted to search for 'height' using the 'in' operator in an undefined variable

I am looking to create buttons that can switch between two different styles of a specific element, like an h1 tag, when clicked. However, instead of toggling

Alter the value of a parameter within a script tag with JavaScript/jQuery

Moving through content on a single page

How can I eliminate the gap above the footer in iframes alignment?

The page could not be generated due to a server error with the syntax. More specifically, an Unexpected token 'export' caused a SyntaxError

Combining two classes into a single class using ‘this’ in JavaScript

What is the best way to loop through an API response in Vue.js?

How to Implement Snap-Enabled Dragging in a Container Using jQuery UI