Creating a Border Length Animation Effect for Button Hover in Material-UI

I'm currently exploring Material-UI and trying to customize a component. My goal is to add a 'Border Length Animation' effect when hovering over the button. Unfortunately, I have yet to successfully implement this animation as intended.

For reference, you can check out this example:

https://www.youtube.com/watch?v=5mabAgEoD6A

If you'd like to view the complete code, it's available on CodeSandbox:

https://codesandbox.io/p/sandbox/admiring-scooby-shcq42?file=%2Fsrc%2FDemo.js

const ImageButton = styled(ButtonBase)(({ theme }) => ({
  position: "relative",
  height: 200,
  [theme.breakpoints.down("sm")]: {
    width: "100% !important", // Overrides inline-style
    height: 100,
  },
  "&:hover, &.Mui-focusVisible": {
    zIndex: 1,
    "& .MuiImageBackdrop-root": {
      opacity: 0.15,
    },
    "& .MuiImageMarked-root": {
      opacity: 0,
    },
    "& .MuiTypography-root": {
      border: "4px solid currentColor",
    },
  },
}));
  <Typography
              component="span"
              variant="subtitle1"
              color="inherit"
              sx={{
                position: "relative",
                p: 4,
                pt: 2,
                pb: (theme) => `calc(${theme.spacing(1)} + 6px)`,
              }}
            >
              <ImageMarked className="MuiImageMarked-root" />
   </Typography>
javascriptcssreactjsmaterial-uicss-animations

Answer №1

Ensure that you include the following essential code snippets in the provided code:

"&::before": {
  content: '""',
  borderTop: "2px solid white",
  borderRight: "2px solid white",
  animation: "borderTopRight 3s infinite alternate",
},
"@keyframes borderTopRight": {
  "0%": {
    width: "0px",
    height: "0px",
  },
  "25%": {
    width: "200px",
    height: "0px",
  },
  "50%": {
    width: "200px",
    height: "48px",
  },
  "100%": {
    width: "200px",
    height: "48px",
  },
},

"&::after": {
  content: '""',
  borderTop: "2px solid white",
  borderRight: "2px solid white",
  animation: "borderBottomLeft 3s infinite alternate",
},
"@keyframes borderBottomLeft": {
  "0%": {
    width: "0px",
    height: "0px",
    opacity: 0,
  },
  "50%": {
    width: "0px",
    height: "0px",
    opacity: 0,
  },
  "50.1%": {
    width: "0px",
    height: "0px",
    opacity: 1,
  },
  "75%": {
    width: "200px",
    height: "0px",
    opacity: 1,
  },
  "100%": {
    width: "200px",
    height: "48px",
    opacity: 1,
  },
},

Make sure to integrate this code into the styled component that you want to animate.

To view the original source code mentioned in the video, visit: Create Border Length Animation with Pure CSS

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

Eliminate route parameters based on user roles in Next.js

I'm encountering an issue with next/router. I have two user accounts, one is admin and the other is user. The admin account has access to the path:'/inventory', while I do not want the user account to have access to that path when logged in. ...

reactjsnext.js

Ensure all vertically stacked boxes maintain the same height using Flexbox technology

My design includes a series of links styled as larger boxes, with varying content and height. Using flexbox to ensure equal heights on each row is straightforward. I'm utilizing the Bootstrap grid layout, but when the boxes stack vertically (one per r ...

htmlcssresponsive-designflexbox

The React Router's Switch component fails to update when the route is changed

In my component, I have a list of news categories. The links to these categories are in another component within the Router. However, when I change the link, the content does not update. I suspect this is because my NewsFeed component, where I define the S ...

javascriptreactjsreact-router

Each time the website refreshes, Object.entries() rearranges the orders

After reading the discussion on Does JavaScript guarantee object property order? It seems that Object.entries() should maintain order. However, I encountered an issue with my Angular website where the order of keys in Object.entries() changed upon refres ...

javascriptangulartypescriptfirebasegoogle-cloud-functions

The post() method in Express JS is functioning flawlessly in Firebase cloud function after deployment, however, it seems to encounter issues when running on a

https://i.stack.imgur.com/bIbOD.pngI am facing an issue with my Express JS application. Despite having both post() and get() requests, the post() request is not working on my local machine. It keeps throwing a 404 error with the message "Cannot POST / ...

javascriptnode.jsexpresspost

switching the image source by selecting different options from a dropdown menu and leveraging JavaScript

I have been attempting to change the src of an image using JavaScript's addEventListener, but for some reason it is not working. Here is an example to illustrate my issue: let bulbImage = $.querySelector(".bulb-image"); let turnOnOption = $.querySele ...

javascripthtmlcssfrontend

Incorporating a classList.toggle into a snippet of code

button, p, h1, h2, h3, h4, h5, a{ /* Define specific elements to use "fantasy" font */ font-family: Tahoma; } #main_body{ margin: 0px auto; background-color: #dedede; } #top_body{ /* Remove margin for simplicity */ } #t ...

javascripthtmlcss

Create a PHP file with various functions and access them using jquery.post or jquery.get in a separate JavaScript file

Is there a way to call multiple PHP functions from my JavaScript file using Jquery.post? Typically, we use Jquery.post to call a PHP file and pass various values as post data. function new_user(auth_type, tr_id, user_name, email) { $.post("bookmark.p ...

phpjavascriptjqueryajax

Organize a collection of items in AngularJS

Consider the following array: var members = [ {name: "john", team: 1}, {name: "kevin", team: 1}, {name: "rob", team: 2}, {name: "matt", team: 2}, {name: "clint", team: 3}, {name: "will", team: 3} ]; I want to create an unordered list for each ...

javascriptangularjsarraysfunction

Communicating between PHP chat client and server

Currently, I am developing a basic PHP web chat application that interacts with a MySQL database. The communication is facilitated through AJAX requests - when a user posts a message, it gets saved in the database. function sendData(){ var textData = $(& ...

javascriptphpmysqlclient-server

CSS not aligning email header correctly

I have been given the task of coding an HTML email for mailing campaigns. I have managed to get everything working, except for a particular piece of code. What I am trying to accomplish is having an image with other elements on top such as titles, a button ...

htmlcssemailoutlook

Determining the Last Modified Date for a Sitemap using Javascript

I am trying to replicate the date format shown within <lastmod></lastmod> tags in a sitemap.xml file. How can I do this? The desired output is as follows: <lastmod>2016-01-21EEST18:01:18+03:00</lastmod> It appears that 'EEST ...

javascriptphphtmlxmlsitemap

Can we dynamically adjust font size based on the width of a div using CSS?

My div is set to 70% width and I have a specific goal in mind: To fill that div with text To adjust the font size so that it takes up the entire width of the div https://i.stack.imgur.com/goVuj.png Would it be possible to achieve this using only CSS? B ...

htmlcssfontsresponsive-designfont-size

Using jQuery to control mouseenter and mouseleave events to block child elements and magnify images

My objective is to create a hover effect for images within specific div elements. The images should enlarge when the user hovers their mouse over the respective div element. I plan to achieve this by adding a child element inside each div element. When the ...

javascripthtmljquerycss

Guide to implementing server-side data loading in App.js using Next.js

Is there a way to fetch the layout data along with the page without adding it to every individual page? The issue I'm facing is that my layout component, loaded once on App.jsx, remains consistent throughout the session. However, due to SSRed page loa ...

javascriptnext.jsserver-side-rendering

Preventing Angular $rootElement.on('click') from affecting ReactJS anchor tag interactions

Running both AngularJS and ReactJS on the same page has caused an issue for me. Whenever I click on a ReactJS <a> tag, Angular's $rootElement.on('click) event is triggered and the page redirects. I need to perform some functionality in Re ...

javascriptangularjsreactjsangularjs-directive

Individual Ajax data

Starting out with javascript, I'm a bit unsure of how to tackle this task. Essentially, I am looking to implement a for loop within the ajax data call, rather than listing each item manually. jQuery(document).ready(function() { ...

javascriptajaxfor-loop

Unable to confirm form validation with Vue

Recently, I started working with Vue and encountered a problem while running the code below. The error message "ReferenceError: $vAddress is not defined" keeps popping up. Despite my efforts to search for solutions online, I couldn't find any that add ...

javascriptvue.jslaravel-5vuejs2

New updates are not appearing in the Azure app service for a React application when using GitHub actions

I have configured the Azure app service with default settings, and there are no warnings or errors during the build process. The deployment was successful, but the changes do not reflect in the production environment; it still shows the previous build. H ...

reactjsazurecachingdeploymentazure-web-app-service