Disable Ripple effect on MUI Button and add custom

Question

I wanted to remove the ripple effect on the button and implement my custom effect in MUI Button. I have removed ripple using disableRipple. I have tried to apply shadow when the user clicks on an element, but somehow it's not working.

import * as React from "react";
import Button from "@mui/material/Button";
import { alpha } from "@mui/material/styles";

export default function DefaultProps() {
  return (
    <Button
      variant="outlined"
      // className='Mui-focusVisible'
      disableRipple
      sx={{
        "&:hover": {
          boxShadow: `0px 0px 0px 0px ${alpha("#000", 0.16)}`
        },
        "&.Mui-focusVisible": {
          boxShadow: `0px 0px 0px 50px ${alpha("#000", 0.16)}`
        },
        "&.Mui-active": {
          boxShadow: `0px 0px 0px 8px ${alpha("#000", 0.16)}`
        }
      }}
    >
      Change default props
    </Button>
  );
}

I have used Mui-focusVisible to apply shadow on click as mentioned here is doc

disableRipple bool false
If true, the ripple effect is disabled. ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure to highlight the element by applying separate styles with the .Mui-focusVisible class.

My main intention is to achieve a click effect same as Ant Design. Check the button here: https://ant.design/components/button/

Sandbox: https://codesandbox.io/s/defaultprops-material-demo-forked-rhggn?file=/demo.js

Can anyone help me out?

Harmonica

Answer 1

STEP 1: Disable default ripple effect

Disable ripple effect by adding disableRipple like this:

<Button disableRipple>Text</Button>

STEP 2: Add custom pulse effect

The magic happens inside the style.css file. See the forked CodeSandbox snippet.

---

EDIT

Since you wanted the code to be inside sx I moved the code from the style.css file to the App.js file and placed it inside sx. See the StackBlitz snippet.

App.js

import React from 'react';
import Button from '@mui/material/Button';
import './style.css';

export default function App() {
  return (
    <Button
      variant="outlined"
      disableRipple
      sx={{
        borderRadius: '5px',

        '&::after': {
          content: '""',
          display: 'block',
          position: 'absolute',
          left: 0,
          top: 0,
          width: '100%',
          height: '100%',
          opacity: 0,
          transition: 'all 0.5s',
          boxShadow: '0 0 10px 10px rgba(0, 123, 255, 0.5)',
        },

        '&:active::after': {
          boxShadow: '0 0 0 0 rgba(0, 123, 255, 0.5)',
          position: 'absolute',
          borderRadius: '5px',
          left: 0,
          top: 0,
          opacity: 1,
          transition: '0s',
        },
      }}
    >
      Change default props
    </Button>
  );
}

index.js

import React from "react";
import ReactDOM from "react-dom";

import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));

index.html

<div id="root"></div>

style.css

// Empty

Brumbaugh

This is good and correct but i wanted same in styleOverrides or inside Sx? can you d that? – Harmonica

I updated my answer. For some reason CodeSandbox wasn't working on the computer I currently use, that's why I used StackBlitz. Just copy-paste the code into your project. – Brumbaugh

I think it's also disabled tab behavior. Tab focus on button has no effect now. – Harmonica

how it can have the same effect as active. – Harmonica

Answer 2

It's much simpler than that... Just call disableRipple={true} and you're good to go.

Cinquefoil

well, you are right but my question was more than that. Thanks for answering. – Harmonica

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review – Arran