Bizarrely rapid transitions from standard to hovering appearance in CSS

Question

Bizarrely rapid transitions from standard to hovering appearance in CSS

After creating a custom styled button with a hover effect, I noticed an issue where if you happen to hover over a specific spot on the button, it quickly switches between its normal and hover states.

https://i.sstatic.net/uPq1F.gif

This is my code:

button {
  height: 34px;
  padding: 0 16px;
  border-radius: 4px;
  margin: 8px;
  border: none;
  background: red;
  color: #fff;
  transition: background .2s, transform .2s;
  outline: none;
  cursor: pointer;
}

button:hover {
  box-shadow: 4px 4px 0 0 blue;
  transform: translate(-1px, -1px);
}

button:active {
  background: green;
  box-shadow: 2px 2px 0 0 blue;
}

<button>I am a button</button>

Code

I'm looking for a solution to fix this problem. Any ideas?

html css

Answer 1

Answer №1

The issue lies in the hover transform effect causing the button to constantly move back and forth as you hover over it. A potential solution is to eliminate the transform effect altogether.

If removing the transform effect is not feasible, an alternative approach would be to encircle the button with a transparent border when hovered. This way, you will need to move further away from the button to cease hovering, creating a more stable hover behavior.

button {
  height: 34px;
  padding: 0 16px;
  border-radius: 4px;
  margin: 8px;
  border: none;
  background: red;
  color: #fff;
  transition: background .2s, transform .2s;
  outline: none;
  cursor: pointer;
}

button:hover {
  box-shadow: 4px 4px 0 0 blue;
  transform: translate(-1px, -1px);
  border: 1px solid transparent;
}

button:active {
  background: green;
  box-shadow: 2px 2px 0 0 blue;
}

<button>I am a button</button>

Answer 2

The issue lies in the hover transform effect causing the button to constantly move back and forth as you hover over it. A potential solution is to eliminate the transform effect altogether.

If removing the transform effect is not feasible, an alternative approach would be to encircle the button with a transparent border when hovered. This way, you will need to move further away from the button to cease hovering, creating a more stable hover behavior.

button {
  height: 34px;
  padding: 0 16px;
  border-radius: 4px;
  margin: 8px;
  border: none;
  background: red;
  color: #fff;
  transition: background .2s, transform .2s;
  outline: none;
  cursor: pointer;
}

button:hover {
  box-shadow: 4px 4px 0 0 blue;
  transform: translate(-1px, -1px);
  border: 1px solid transparent;
}

button:active {
  background: green;
  box-shadow: 2px 2px 0 0 blue;
}

<button>I am a button</button>

Answer 3

Answer №2

To solve this issue, consider adding a container with a slight padding and monitoring the hover event on it instead of the button itself. This stationary container should prevent any shifting problems.

#buttonContainer {
  display: inline-block;
  padding: 2px;
}

button {
  height: 34px;
  padding: 0 16px;
  border-radius: 4px;
  margin: 8px;
  border: none;
  background: red;
  color: #fff;
  transition: background .2s, transform .2s;
  outline: none;
  cursor: pointer;
}

#buttonContainer:hover button{
  box-shadow: 4px 4px 0 0 blue;
  transform: translate(-1px, -1px);
}

button:active {
  background: green;
  box-shadow: 2px 2px 0 0 blue;
}

<div id="buttonContainer">
    <button>I am a button</button>
</div>

Answer 4

To solve this issue, consider adding a container with a slight padding and monitoring the hover event on it instead of the button itself. This stationary container should prevent any shifting problems.

#buttonContainer {
  display: inline-block;
  padding: 2px;
}

button {
  height: 34px;
  padding: 0 16px;
  border-radius: 4px;
  margin: 8px;
  border: none;
  background: red;
  color: #fff;
  transition: background .2s, transform .2s;
  outline: none;
  cursor: pointer;
}

#buttonContainer:hover button{
  box-shadow: 4px 4px 0 0 blue;
  transform: translate(-1px, -1px);
}

button:active {
  background: green;
  box-shadow: 2px 2px 0 0 blue;
}

<div id="buttonContainer">
    <button>I am a button</button>
</div>

Bizarrely rapid transitions from standard to hovering appearance in CSS

Answer №1

Answer №2

Similar questions

Make the background image draggable while maintaining its size with background-size:cover

Creating a rotating circle in CSS with ion-slides: A step-by-step guide

Left-align the tab elements

If there is a lack of text at the beginning, then insert the

"Why is it that only one of the two similar spans with onclick event is not functioning properly

Utilizing Regular Expressions in Vb.net for extracting telephone numbers

Display the menu and submenus by making a request with $.get()

Greek symbols do not display correctly in SQL Server when accessed through PHP

Guide on how to use JavaScript to swipe through loaded epub files in both lateral directions

How can I apply a blue border to highlighted elements in the live preview?

Dynamic JavaScript button control based on time

Issue with jQuery DataTable: Unable to use column-level filters at the top and maintain a fixed height simultaneously

Creating a specific quantity of divs with JavaScript

Webpack is failing to recognize certain CSS files

Issue with displaying jQuery 3.5.1 mobile CSS formatting on live server preview using Visual Studio Code

Dynamic script appending encounters unforeseen challenges

How can I ensure that the background color of my HTML email blends seamlessly with the color of the email client's background?

Guide to setting the ng-selected value within AngularJS

Adjust the sizing of all fonts following the switch in font styles

Overlaying images on top of text