Increase the border at the bottom while hovering with React.js and the Material UI library

Can someone help me achieve a hover effect similar to the one in this question on Stack Overflow: Hover effect : expand bottom border

I am attempting to create the same effect in React using makeStyles of Material UI. Here is my current code:

const useStyles = makeStyles((theme) => ({
 //other code
  remove: {
    textTransform: "none",
    fontSize: "0.75rem",
    "&:after": {
      transition: theme.transitions.create(["transform"], {
        duration: theme.transitions.duration.standard,
      }),
      transform: "scale(0)",
      borderBottom: "1px solid #dbdada",
      transformOrigin: "0% 50%",
    },
    "&:hover": {
      background: "none",
      "&:after": {
        transform: "scale(1)",
      },
    },
  },

 // other code
}));

This is the component where I am trying to implement the border bottom animation:

<Button
      classes={{root:classes.remove}}
      onClick={() => handleClickRemove(item)}
    >
      Remove
    </Button>
javascriptcssreactjsanimationmaterial-ui

Answer №1

If you want to add animation to the bottom border of a Button in Material-ui, you can achieve this by creating a transition for the border-bottom property. Then, apply the CSS injection to the Button's root class using the classes prop.

Check out a live example here.

In the Button's classes prop, inject the necessary CSS into the root like so:

<Button
    variant="contained"
    classes={{
      root: classes.remove
    }}
  >
    Remove
  </Button>

Then define the styles in your useStyles:

 const useStyles = makeStyles((theme) => ({
 ...
  remove: {
    textTransform: "none",
    fontSize: "0.75rem",
    borderBottom: "2px solid transparent",
    transition: theme.transitions.create(["border-bottom"], {
      duration: 1000
    }),
    "&:hover": {
       textDecoration: "none",
       borderBottom: "2px solid black"
    }
  }
 ...
}));

Keep in mind that when setting up the transition for border-bottom, you have the option to adjust the easing like the duration (by default, the easing is set to easeInOut).

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

Refinement of chosen selection

Is there a way to dynamically filter the content of a table based on the selected option? I want the table to refresh every time I change the option in the select dropdown. HTML <select ng-model="selectedGrade" ng-options="grade.Id as grade.Title f ...

javascriptangularjsselect

Having issues with the <ul> tag not displaying correctly

I'm currently working on implementing a side navbar for my website, but I've run into an issue with spacing. In the demo linked in my fiddle, you'll notice that the <ul> element inside the receiptDropDown class doesn't push the k ...

htmlcss

The CSS isn't functioning correctly in the HTML file as it is in the CSS file

When I added this code directly to my html file, it worked perfectly: <style type="text/css" media="screen"> #headerimg { display: block; background-image: url('/Content/images/epp/ebweblogo1.gif'); background- ...

htmlcss

Incorporate a custom style sheet into your Express application

Utilizing ejs, express, and parse.com for my web application backend has presented a challenge when it comes to adding stylesheets. Despite searching for solutions, I have not been able to resolve the issue. Sharing my code in hopes of finding a solution. ...

javascriptexpressparse-platformejs

In Typescript, try/catch blocks do not capture return values

I am currently working on a function that performs database operations, with the implementation contained within a try/catch block. Here is an example: async function update({id, ...changes}): Promise<IUserResult> { try { //insert code here retu ...

javascriptnode.jstypescript

Encountering issues with the Sequelize Model.prototype.(customFunction) feature malfunctioning

While attempting to define a customFunction within the Sequelize model, I encountered an error: TypeError: user.getJWT is not a function at User.create.then (/projects/test/a/app/controllers/UserController.js:22:29) Below is the code snippet from ...

javascriptnode.jsexpresssequelize.js

Create a file object using content with the help of JavaScript

I am working with a file containing specific data const ics = 'BEGIN:VCALENDAR\n' + 'VERSION:2.0\n' + 'CALSCALE:GREGORIAN\n' + 'METHOD:PUBLISH\n' + 'END:VCALENDAR\n'; I am trying t ...

javascriptangular

How to incorporate a JavaScript class into a VueJS project

Looking to incorporate a JavaScript class into my Vue application. The class structure is as follows: class className { constructor() { ... } function1() { ... } static funtion2() { ... } } Attemptin ...

javascriptvue.js

Creating Varied Results Depending on State Values

I'm in the process of developing a quiz system where different selections lead to distinct outcomes, but I'm facing an issue where the output remains the same. What might be causing this problem? As an example, a user chooses between button 1 an ...

javascriptreactjs

Unable to locate module, encountered a webpack alias issue while using typescript and react

I'm currently in the process of setting up aliases in webpack. My goal is to make importing components in App.js easier by replacing: ./components/layout/Header/Header with: @components/layout/Header/Header This way, I can avoid potential issues w ...

reactjstypescriptnpmwebpackalias

What could be causing this image to disregard the designated width value?

https://i.stack.imgur.com/bPH4t.png While working on my project with Next.js, I encountered an issue with the IconText component provided by Next.js. Even though I specified a width value for the image, it seems to be ignoring it. Below is the structure o ...

cssnext.js

How can I adjust the size of posts on the Tumblr Official Theme?

The size of posts on the Tumblr Official Theme caught my attention recently. It seems they are set at 500px, causing photos posted on the blog at the original dash post size of 540px to be compressed. I've examined the coding for the theme but can&apo ...

htmlcsstumblr

Vue - making one element's width match another element's width

Trying to dynamically adjust the innermost element's width to match the outermost element's width with Vue: <div id="banner-container" class="row"> <div class="col-xs-12"> <div class="card mb-2"> <div ...

javascripthtmlcssvue.js

The div's height is not matching the CSS declaration as expected

In my HTML, I have a div called innerDetails which serves as a flex item with the following CSS properties: .cover { height: 100vh; width: 100%; } #screenCon ...

htmlcss

NodeJS video streaming feature does not close the connection when the user disconnects or navigates to a different page

Currently, I'm in the process of developing a video streaming server using nodeJS with express. To monitor the progress status, I am utilizing the "request-progress" module. So far, everything pertaining to video streaming is working perfectly. Howev ...

javascriptnode.jsexpressvideostream

Creating a curved exponential data set with specific endpoints and a set number of data points

Struggling to create a function that involves math skills, I could really use some assistance. The task is to design a function that takes data points x and generates an array of size x with exponentially increasing values from 0 to 100. It would be ideal ...

javascriptmathaudiopseudocodeexponential

Imagine a scenario where your json_encode function returns API data that is already in JSON format. What would

It has been a while since I last worked with JSON/PHP/AJAX, and now I am struggling to access the returned data. The AJAX function calls a PHP script that makes an API call returning JSON in $data. The JSON is then decoded using $newJSON = json_decode($da ...

javascriptphparraysjson

unique HTML elements located inside a text box

I am working on a system that allows users to customize order confirmation emails by replacing placeholders with actual customer data. Currently, we use tags like {customer_name}, but this method can be confusing and prone to errors. My goal is to create ...

htmlcss

Obtain every possible sequence of US phone number segments for a provided number

The format of a US phone number is as follows: (XXX) XXX-XXXX Given a string consisting only of digits with a length between 0 and 10, I want to generate an array of all possible chunks that match the US phone number format. For example: Input: "54" Out ...

javascriptreactjsregexalgorithm

How can I achieve a letter-spacing of 0.5 pixels in CSS?

Encountering an issue, I set out to enhance readability by adjusting letter-spacing to 1px. Displeased with the result, I attempted a half pixel spacing of 0.5px but found it ineffective. Subsequently, I experimented with em attributes but failed to accomp ...

cssletter-spacing