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

Is there a way to link a particular model table with a designated user table?

Hey everyone, I'm new to stack overflow and this is my first question. I hope it's clear enough for you all to understand. I'm currently working on a budget API using Node.js, Sequelize, Express, and PostgreSQL. The API allows users to add/ ...

javascriptnode.jsdatabasepostgresqlexpress

The input field cannot be accessed via touch on mobile devices

<div class="form-group row pswrd" style="padding: 0px 10px"> <div id="email" class="col-md-12 col-xs-12"> <input type="password" class="form-control c_fname" id="c" #pswd name="password" placeholder="password" [(ngModel)]="user.passwor ...

htmlcssangular

Tips for adjusting CSS font sizes within a contenteditable element?

I am looking to develop a compact HTML editor using JavaScript that allows me to customize the font-size of selected text with a specific CSS value. The documentation states that the FontSize command is used like this: document.execCommand("FontSize", fal ...

javascripthtmlcontenteditable

Can the animation be looped using setInterval()?

Once the images finish sliding in the animation, they continue to slide right endlessly. I've attempted using a setTimeout function to move the images back left and restart the animation, but this causes the setInterval animation to stop. Is there a w ...

javascriptjqueryhtmlcssanimation

A guide to accessing the sibling of each selector with jQuery

Imagine you have the following HTML structure: <div class="parent"> <div class="child"></div> <div class="sibling">content...</div> </div> <div class="parent"> <div class="child"></div> <div ...

javascriptjqueryhtmlcss

What is the process for animating classes instead of ids in CSS?

My webpage currently features a setup similar to this. function wiggle(){ var parent = document.getElementById("wiggle"); var string = parent.innerHTML; parent.innerHTML = ""; string.split(""); var i = 0, length = string.length; for (i; i ...

javascripthtmljquerycsscss-animations

On mobile devices, a height of 100vh exceeds the visible screen area

Struggling to cover the entire visible part of the browser window using 100vh due to issues on certain devices and mobile browsers. For example, in Safari, the URL section hides a top part, and similarly on some Android devices using Chrome. https://i.stac ...

cssmobileresponsive-designfullscreen

Inquiries for Web-Based Applications

As I contemplate coding my very first webapp, I must admit that my skills are somewhere between beginner and intermediate in html, css, js, jquery, node, sql, and mongodb. However, the challenge lies in not knowing how to bring my vision to life. My ulti ...

javascripthtmlcssweb-applicationsvue.js

The function Object.defineProperties() allows for reassigning a property's value after it has been initially

The issue arises in the initial code snippet provided below, specifically when dealing with the object book. Initially, the value of book.year is set to 2013. Even after updating the value by setting book.year = 2015, retrieving the value using book.year s ...

javascriptoop

Converting HTML elements into Vue.js Components

In my Vue.js application, I am utilizing a d3.js plugin to generate a intricate visualization. I am interested in implementing a customized vue directive to the components that were incorporated by the d3 plugin. It seems that the $compile feature, which ...

javascriptd3.jsvue.jsvuejs2

ReferenceError: _jquery2.default.ajax is not a function" encountered in a React Native application

I have been attempting to use jQuery to retrieve xml data from an internal website. My expo project setup is quite basic and resembles the following: import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; imp ...

javascriptreactjsreact-native

The React.js search feature consistently retrieves identical content every time

I am currently working on a project to create a search engine using React.js, specifically to search for GIPHY gifs through their API. However, I have encountered an issue where the gifs displayed do not update when I type in new words after erasing the pr ...

javascriptreactjsfetch-api

Problem encountered while using AJAX to load a PHP script, triggered by an onclick event;

My expertise lies in HTML, CSS, JavaScript, and PHP. However, I find myself lacking in knowledge when it comes to jQuery and Ajax. While I work on web design projects involving bars and nightclubs that prioritize style over performance, my current job dema ...

phpjavascripthtmlmysqlajax

Having difficulty asserting the dual-function button in both its disabled and enabled states

I have a button that is part of a dual-action setup. This button is disabled until a certain event occurs. Here is the DOM structure while the button is disabled: <div class="doc-buttons"> <a href="#" onclick="actualsize();" id="tip-size" cla ...

javascriptjavajqueryselenium-webdriverwebdriver

Tips for sending a JWT token in the header

I create web applications using React JS, Node.js, and Express After logging in, I receive an error message saying "No token attached". Now, I need to add a JWT token to the header. How can I accomplish this? Below is my code snippet: import { webToken } ...

node.jsreactjsexpressjwt

How to Align Navigation Searchbar in Center When Bootstrap is Collapsed

I am attempting to center my search bar when it is collapsed. Currently, it appears like this: As you can see, the links are centered, but not the search bar. This is the existing HTML structure: <!-- Navigation Bar Start --> <div class ...

htmlcsstwitter-bootstrapnavigation

Error in Displaying Vuetify Child Router View

I am currently working on integrating a child router-view to be displayed alongside surrounding components. Here is an overview of my routing setup: { path: "/login", name: "TheLoginView", component: TheLoginView, }, { path: "/dashboa ...

javascriptvue.jsvuexvuetify.js

What is the best way to create an index for a user-provided value in a textbox

Looking for guidance on how to set an index to user-provided values in a textbox, append them to a table in a new row, and display that index in the first column of every row. I am unfamiliar with this type of functionality. $(document).ready(function() ...

javascriptjqueryhtmlcss

Apollo GraphQL has initiated the detection of a new subscription

My approach involves utilizing graphql-ws for subscribing to GraphQL events. I rely on the Observable interface to listen to these events. Although I can use the error callback to identify when a subscription fails to start, it is challenging to determine ...

javascripttypescriptgraphqlapollo-client

Saving similar and dissimilar information in a database

I have been working on implementing a Like and Unlike feature for users to interact with products. Following this tutorial at , I've completed the necessary steps. However, I'm facing an issue where the likes are not being stored in the database ...

javascriptphpjqueryhtmlajax