The impact is felt across every button in CSS

Why is this happening? When I hover over a button, all buttons apply the effect, which should not be the case. I only want the effect to be applied to the button that I am hovering over.

.buttons{
  font-family: arial;
  text-decoration: none;
  padding: 10px 15px;
  background: #000;
  color: #fff;
  border-radius: 3px;
}


.buttons:after{
content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 0%;
    height: 100%;
    background-color: rgba(255,255,255,0.4);
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;
}

.buttons:hover:after{
width: 120%;
background-color: rgba(255,255,255,0);
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
<br><br>
<a href="#" class="buttons">Submit</a>
<a href="#" class="buttons">Submit</a>
<a href="#" class="buttons">Submit</a>
<a href="#" class="buttons">Submit</a>

htmlcss

Answer №1

Your use of width: 120%; in the :hover state is causing the element to be measured relative to the document's dimensions, not the button itself.

To fix this issue, you should add position: relative; to the button element so that it becomes the offset parent:

.buttons{
  position: relative;
  font-family: arial;
  text-decoration: none;
  padding: 10px 15px;
  background: #000;
  color: #fff;
  border-radius: 3px;
}

.buttons:after{
content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 0%;
    height: 100%;
    background-color: rgba(255,255,255,0.4);
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;
}

.buttons:hover:after{
width: 120%;
background-color: rgba(255,255,255,0);
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
<br><br>
<a href="#" class="buttons">Submit</a>
<a href="#" class="buttons">Submit</a>
<a href="#" class="buttons">Submit</a>
<a href="#" class="buttons">Submit</a>

Answer №2

You overlooked the following property,

Make sure to update the CSS with the additional code:

.buttons{
  position:relative;/* Add this property */
}


.buttons{
  font-family: arial;
  text-decoration: none;
  padding: 10px 15px;
  background: #000;
  color: #fff;
  border-radius: 3px;
  position:relative;
}


.buttons:after{
content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 0%;
    height: 100%;
    background-color: rgba(255,255,255,0.4);
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;
    overflow:hidden;
}

.buttons:hover:after{
width: 120%;
background-color: rgba(255,255,255,0);
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
<a href="#" class="buttons">Submit</a>
<a href="#" class="buttons">Submit</a>
<a href="#" class="buttons">Submit</a>
<a href="#" class="buttons">Submit</a>

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

Achieving a consistent border-radius effect during hover transitions

I designed a div that initially displays an image, but upon hovering over it, a second div with text and a solid colored background appears to mask the original content. To see what I'm talking about, check out my jsfiddle: 'Mask on Hover' ...

htmlcsscss-transitions

Swap out the image backdrop by utilizing the forward and backward buttons

I am currently working on developing a Character Selection feature for Airconsole. I had the idea of implementing this using a Jquery method similar to a Gallery. In order to achieve this, I require a previous button, a next button, and the character disp ...

javascriptjqueryhtmlcss

What is the process for including an external .js file in my VueJS2 index.html?

Currently, I am faced with a challenge involving two external Javascript files that are responsible for managing animations and vector triangulation for a background animation. In a typical html/css/js project, adding these two .js files would involve incl ...

javascripthtmlvue.jsvuejs2

Issues with toggling the menu on Angular 14 using Bootstrap 4.6

I am struggling with implementing a menu on the header section of my Angular 14 homepage. The menu I added is not opening as expected. Even after trying various working menu samples from the internet, I couldn't get it to work in my project. Here are ...

htmlangulartwitter-bootstrapbootstrap-4angular14

Steps for implementing a select all feature with jQuery

I'm currently working on a jQuery function that is acting as a select-all option. Everything is functioning correctly except that when I deselect any of the child elements from select all, the option remains enabled. My goal is to enable or disable th ...

javascriptjquerycss

Implementing automatic line breaks in Bootstrap

When setting the "overflow scroll able" option, I want it to only allow scrolling in the y direction and if x content overflows, a line break should occur. I tried applying 'white-space', but it didn't work as expected. <ul class="s ...

javascriptjqueryhtmlcssbootstrap-4

There appears to be an issue with the functionality of the external CSS pathway

placeholder image hereplaceholder image hereplaceholder image here I'm encountering a problem and struggling to identify the mistake in my current approach. ...

javascripthtmlcssnode.jsexpress

Can Google Charts columns be customized with different colors?

Is it possible to modify the colors of both columns in Google's material column chart? Here is the code I am using for options: var options = { chart: { title: 'Event Posting', subtitle: 'Kairos event p ...

javascripthtmlcsschartsgoogle-visualization

Ways to extract image URLs from HTML and use them in Java

Hi there, I am trying to retrieve the URLs for images on Bing. For example, this link returns cat images. How can I specifically obtain the .png URLs? ...

androidhtml

What is the best way to store an HTML header text file in a PHP variable?

Here is a snippet of my HTML file: <form action="cnvrt.php" method="POST" > Enter your text here - <input type="text" id="in" name="in"> <br> <input type="submit" value="submit" > </form> This is how my PHP file look ...

phphtmlajaxjson

What is the best way to perfectly align an SVG inside its container?

Is there a way to horizontally center this SVG within .svg_wrapper? .svg_wrapper { border: 1px solid grey; width: 200px; } <div class="svg_wrapper"> <svg viewBox="0 0 600 425"> <path d="M 175, 175 m 0, -75 a 75,75 0 1,0 ...

csssvg

Attempting to imitate the hover effect of a scroll-down button

Looking for advice on creating a scroll down button with a hovering effect similar to the one found on this website - . Any tips or suggestions would be greatly appreciated. ...

jquerycss

Technique for seamlessly moving between subpages and main page while scrolling to a specific id

I'm struggling with coding and thought I'd reach out for help here. Can anyone provide a solution to my problem? Issue - I have a navigation link on my main page that scrolls to an ID using jQuery. It works fine on the main page, but not on any ...

javascriptjqueryhtmlcss

What are some effective ways to ensure the footer stays at the bottom of the page

I managed to successfully position the footer at the bottom of the page, but I noticed that when I resize the screen to fit a phone, especially when there is scrolling on the page, the footer moves up! <footer className="footerContainer"> &l ...

htmlcsssass

Video embedded in a plain CSS popup that automatically starts playing even before the popup is triggered

My goal is to incorporate a video into a minimalist CSS modal window, following the guidance provided here. While the setup works well overall, I encounter a issue where the video starts playing before the modal window is opened (I need to maintain the "au ...

htmlcssmodal-dialog

Convert the 'value' attribute in HTML into a clickable link

Is there a way to make the output value of an HTML input field into a clickable link? Right now, it appears as follows: <input type="email" class="form-control" name="contactEmail" value="<?php echo $row_rsContactD ...

javascriptphphtml

Is it possible to generate a triangular attachment below a div element?

My designer sent me a unique design and I'm wondering if it's possible to replicate using HTML, CSS, or JavaScript? https://i.stack.imgur.com/spB71.png I believe it can be done with CSS by creating a separate div positioned absolutely under the ...

javascriptjqueryhtmlcss

Ensuring that objects remain fixed in place regardless of window resizing is a common task in web development, often achieved through a

I've been attempting to create range sliders with boxes that display the slider's current value, but I'm having trouble getting them positioned correctly when the window size changes. Despite trying various solutions found online, I resorted ...

javascriptjqueryhtmlcssfixed

Steps for transferring an `<li>` element from one `<ul>` to another

<ul id="List"> <li class="li">1</li> <li class="li">2</li> </ul> <ul id="List2"></ul> const items = document.querySelectorAll(".li"); for(var i = 0; i < ...

javascripthtmljquery

Avoiding the page from scrolling to the top when the sidebar is opened (NextJS, Typescript, TailwindCSS)

I'm currently working on a website that features a sidebar for smaller screens. While the sidebar functions properly, I would like to keep the background page fixed in place when the sidebar is active so it does not scroll. In my code, I have utilize ...

htmlcsswebnext.jstailwind-css