Turn off the Ripple effect on MUI Button and incorporate a personalized touch

I am trying to create a custom click effect for the MUI Button by removing the default ripple effect and implementing my own shadow effect. I have disabled the ripple using disableRipple, but I am facing issues in applying the shadow effect when the user clicks on the button.

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 referred to the Mui-focusVisible class to add shadow on click as mentioned in the documentation.

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.

I am aiming to achieve a click effect similar to the one used in Ant Design buttons. You can see the Ant Design buttons for reference here.

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

If anyone can help me with this, I would greatly appreciate it.

javascriptcssreactjsmaterial-uicss-animations

Answer №1

STEP 1: Turn off the default ripple effect

To disable the ripple effect, simply include the disableRipple attribute like so:

<Button disableRipple>Text</Button>

STEP 2: Implement a customized pulse effect

The customization takes place in the style.css file. Check out the modified CodeSandbox snippet.

MODIFY

Based on your request to have the code within sx, I transferred the code from the style.css file to the App.js file and incorporated it within sx. View 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',
        },
      }}
    >
      Adjust 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

// Blank

Answer №2

It's really not that complicated... All you have to do is add disableRipple={true} and you're all set.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Triggering blur event manually in Ionic 3

Is there a way to manually trigger the blur event on an ion-input element? The ideal scenario would be with an ionic-native method, but any javascript-based workaround will suffice. My current configuration: Ionic: ionic (Ionic CLI) : 4.0.1 (/User ...

javascripttypescriptionic-frameworkionic3

Trigger Function on Input Change in Angular 2

Key aspects of component nesting: export class Child { @Input() public value: string; public childFunction(){...} } Main component responsibilities: export class Parent { public value2: string; function1(){ value2 = "a" } function2( ...

javascriptangulardata-binding

Show JSON response using AJAX jQuery

After receiving the JSON Response, { "user_data": { "id": 22, "first_name": xxx, "last_name": xxx, "phone_number": "123456789", }, "question_with_answers" : [ { "id": 1, ...

javascriptphpjqueryjsonajax

Validating React Typescript Props: Ensuring that two specific props do not exist simultaneously

Currently, I'm developing a reusable component in React-Typescript and I am looking to validate my props OnClick and component as follows: Both onClick and component prop are optional. These props will only be passed to the component if they need to ...

reactjstypescripttypescript-typingsreact-typescript

I can't seem to get db.collection.findOneAndUpdate() to work properly when using the

User Data { "_id" : ObjectId("60c012cc35fd3c596d61e72d"), "tags" : [ "react", "node", "js" ], "title" : "This is the updated title", "description" : "I am a skil ...

javascriptnode.jsmongodb

Look into the data with vue.js, but there's not much

1. As a newcomer to vue.js, I encountered some surprising issues while experimenting with examples. The first one arose when I assigned an id to the body tag and included the following JavaScript code: <html> <head> <meta charset="utf-8 ...

javascriptvue.js

The overflow scroll feature is activated, causing the background to appear greyed out, yet the

I've been struggling for hours to achieve this layout: Check out the code example here html, body { height: 100%; overflow-y: hidden; overflow-x: hidden; margin: 0px; padding: 0px; } .MyNavbar { height: 30px; background-color: red; } ...

htmlcss

Learn how to dynamically pass a value from a prop to a router-link in Vue.js

I created a custom button component and decided to switch from using <a> tags to <router-link>. However, I encountered an error because the router-link was rendering before the prop received its value. To address this, I added an if statement b ...

javascriptvue.jsvue-router

AngularJS's angular.element is currently accessing the current Document Object Model

While experimenting with angular.element, I was curious about accessing the current DOM from an ng-click event. Is there a way to do this? For example: <div ng-click="angular.element(curElement).parent()..."></div> How can I retrieve the cur ...

javascriptangularjs

What is the best way to trigger a JavaScript function using an HTML button?

I am trying to trigger a JavaScript file from an HTML component by clicking on a button, but nothing happens when I click the button: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> < ...

javascriptajax

Utilize jQuery to apply inline styles to dynamically created div elements

I am attempting to apply inline styles to a div using jQuery. The current state of the div, as seen in Firebug, is shown below: https://i.sstatic.net/rqhIc.jpg My goal is to retain the existing CSS while adding margin-left:0 and margin-right:0 to the cur ...

javascriptjqueryhtmlcsswordpress

Overriding a CSS property with !important proves ineffective

I need to make adjustments to an old internal page that currently has the following CSS styling: table { font-family: "Arial"; font-size: 13px; text-align: left; border-collapse: collapse; border: 1px solid black; vertical-align: m ...

htmlcss

The pop-up fails to appear

Could you assist me in identifying the issue with my code? <script type="text/javascript"> function PopupCenter(pageURL, title,w,h) { var left = (screen.width/2)-(w/2); var top = (screen.height/2)- ...

javascriptphphtml

Forcing the Empty Table message in jQuery DataTables post an AJAX request

My configuration for jquery-datatables includes a custom search filter that acts as both the standard keyword filter and a specific Item ID search using an ajax call to retrieve a value from the back end, which is then used to search a particular column in ...

javascriptjqueryajaxdatatable

Issue with external JavaScript file being unresponsive on mobile browser

Hello everyone, hope you're having a great afternoon or evening I've encountered an issue with mobile browsers like Chrome Mobile and Kiwi where the external js file is not visible in the html file. The script.js file looks like this: alert(&ap ...

javascripthtmlmobileexternal

How to programmatically unselect an ng-checkbox in AngularJS when it is removed from an array

Utilizing checkboxes to gather values and store them in an array for dataset filtering purposes. The objectives are as follows: Show child filters when parent category is selected. Unselect all children if parent is unselected (otherwise they will ...

javascriptangularjscheckbox

Conceal component while navigating in VueJs

I am working on a Vue project. I am trying to implement a feature where a component is hidden while the user scrolls, but then reappears once the scrolling stops. I have tried using a scroll event, but the component does not show up again. <div c ...

javascriptvue.jsscrollvue-componentdom-events

The function Waterline.create() is not available

Currently in the process of building a basic REST API using Sails.js and Waterline-ORM, I've encountered an issue regarding Post.create is not a function when trying to create an object within the ORM on a Post request. Here is my model: module.expor ...

javascriptsails.jsnodeswaterline

What could be causing the debugging issue in my React Native project?

Debugging cannot be performed as the Runtime is not ready. Ensure that the Packager server is running properly. I attempted various solutions, but none of them seemed to work. https://i.sstatic.net/6EgIu.png ...

iosreactjsreact-nativeecmascript-6

Using an Ajax call to show a date picker when a button is clicked

I've created buttons for each ID in the "habitaciones" table. When a button is clicked, it should display a specific datepicker with dates disabled for that ID. To achieve this, I utilized an Ajax function where the form should be displayed based on ...

javascriptphpjqueryajaxdatepicker