Flickering is being experienced in CSS transitions

Whenever the user hovers over my button, a color smoothly transitions from left to right. But I'm experiencing some flickering instead of a seamless transition. How can I resolve this issue?

.slide_right:hover {
  box-shadow: inset 400px 0 0 0 #D80286;
}

.button_slide {
  color: #FFF;
  border: 2px solid rgb(216, 2, 134);
  border-radius: 0px;
  padding: 18px 36px;
  display: inline-block;
  font-family: "Lucida Console", Monaco, monospace;
  font-size: 14px;
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow: inset 0 0 0 0 #D80286;
  -webkit-transition: ease-out 0.4s;
  -moz-transition: ease-out 0.4s;
  transition: ease-out 0.4s;
}
<input type="button" class="button_slide slide_right" value="BUTTON: SLIDE INSIDE">
<input type="button" class="button_slide slide_right" value="BUTTON: SLIDE INSIDE">
<input type="button" class="button_slide slide_right" value="BUTTON: SLIDE INSIDE">
<input type="button" class="button_slide slide_right" value="BUTTON: SLIDE INSIDE">
<input type="button" class="button_slide slide_right" value="BUTTON: SLIDE INSIDE">
<input type="button" class="button_slide slide_right" value="BUTTON: SLIDE INSIDE">

View on JSFiddle

htmlcsscss-transitions

Answer №1

To achieve a subtle effect, try adding a tiny spread radius to the initial box shadow value. For example: 

box-shadow: inset 0 0 0 0.01px #D80286;
.

.slide_right:hover {
  box-shadow: inset 400px 0 0 0 #D80286;
}

.button_slide {
  color: #FFF;
  border: 2px solid rgb(216, 2, 134);
  border-radius: 0px;
  padding: 18px 36px;
  display: inline-block;
  font-family: "Lucida Console", Monaco, monospace;
  font-size: 14px;
  letter-spacing: 1px;
  cursor: pointer;   
  box-shadow: inset 0 0 0 0.01px #D80286;
  -webkit-transition: ease-out 0.4s;
  -moz-transition: ease-out 0.4s;
  transition: ease-out 0.4s;
}
<input type="button" class="button_slide slide_right" value="BUTTON: SLIDE INSIDE">
<input type="button" class="button_slide slide_right" value="BUTTON: SLIDE INSIDE">
<input type="button" class="button_slide slide_right" value="BUTTON: SLIDE INSIDE">
<input type="button" class="button_slide slide_right" value="BUTTON: SLIDE INSIDE">
<input type="button" class="button_slide slide_right" value="BUTTON: SLIDE INSIDE">
<input type="button" class="button_slide slide_right" value="BUTTON: SLIDE INSIDE">

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

The website shifts as you navigate to a new page

Could use some insight on an issue with my website . Whenever I navigate to a different page, like the "Rules" page from the main site, the container seems to shift down slightly. Any ideas on what could be causing this? I've been struggling to pinpoi ...

phphtmlcss

When a form input is submitted, the webpage will refresh with a new

I have a form embedded on my WordPress page. I want to identify users without referrers so that I can set the referrer for them automatically (the referrer part is handled by a plugin). The registration form URL looks like this: The code provided below w ...

javascriptphphtmlformsappend

Create a webpage that utilizes PHP, MySQL, and HTML to load additional content in a way similar to Facebook or the

Seeking guidance on how to incorporate pagination functionality akin to Twitter and Facebook, where a list of items loads initially and then a "load more" button appears below. When clicked, this button appends the list with additional items. Can anyone ...

htmlcssajax

Prevent Bundle Transformer from converting relative paths in LESS stylesheets

I am currently utilizing Bundle Transformer for compiling LESS in an MVC5 project. The main.less file in my LESS bundle imports other files from subfolders, some of which reference image files like this example found in /css/structure/header.less: .site__ ...

csslessasp.net-mvc-5bundletransformer

Tips for preventing cursor tooltips from going off the screen

I've been working on creating a popup box that displays text positioned away from an element when the cursor hovers over it. Check out a simplified demo here. Currently, the popup box collapses when it gets close to the bounding box. I'd like it ...

javascripthtmlcss

What is the best way to utilize the @Import CSS rule in my code?

After using CSS for a considerable amount of time, I have successfully utilized the @import rule in the past. However, I am currently encountering an issue with it on a new project. Is there anyone who can offer assistance? Here is the code: @import url(&a ...

htmlcss

The action of setting the inner HTML of "main" to "testing" is temporary and will revert back to its original state rather than permanently change

In this snippet of my Java.html code, I am inserting the <a href='' onclick='load_des()'><li><p>$row[Title]</p></li></a> element into the div element with the ID "main". This content is being echoed f ...

javascripthtmlajax

CSS Animation: Smoothly transition out of a class

When this code is executed, the modal is displayed with a smooth transition using CSS3. Upon clicking on "Close Modal," the class ".is-active" is removed instantly. Instead, I would like to achieve the reverse effect where the class is removed gradually. ...

jquerycssanimation

Is there a way to resize an SVG coordinate system without altering the font size?

I am currently working on a data visualization project where I need to create an SVG graphic based on a specific data range. It would be ideal to use the viewBox attribute in order to scale the SVG so that the width of the graphic matches the width of the ...

htmlsvg

Discover if every single image contains a specific class

HTML : <div class="regform"><input id="username" type="text" name="username" placeholder="Username" required><h3 class="check"><img src=''/></h3></div> <div class="regform"><input id="password" type=" ...

javascriptjqueryhtmlcssclass

Animating the navbar with CSS transitions

https://i.sstatic.net/cV3X6.png Seeking advice on adding a transition effect to my navbar. Specifically, I'd like to have a colored background appear below each link when hovered over. For example, when hovering over "HOME," a yellow color should dis ...

htmlcsstwitter-bootstrap

HTML Date Form: Setting the Start Date to Tomorrow with JavaScript

Is there a way to restrict the start date to tomorrow's local date? I'm having trouble with the code below: <form method="POST"> <div> <label for="s2">pickup_date</label> ...

javascripthtmlformsdatelocaltime

What is the method for swapping out the numerical ending of a value three times, increasing the ending, and then looping it with Text Pastry?

I am faced with the task of generating 210 unique checkboxes, each requiring its own distinct name, id, and label for value. These checkboxes are organized in tables, with each table containing 6 checkboxes. So far, I have manually configured 54 checkbox ...

htmlsublimetext3sublime-text-plugin

How can the overflow:hidden be applied to the body after a specified height, rather than the height of the viewport

My page has a <body> element with a height of 800px, however the content exceeds this height. I would like the body to display content up to 800px and then hide the rest, but using overflow:hidden hides all content beyond the viewport height of 678p ...

htmlcssoverflow

Tips for applying the maxlength attribute to every string entered with a comma in a single input field

In the input textbox field provided, users are allowed to enter values separated by commas like... value 1,value 2,value 3,value 4 There is a requirement to limit the maximum length of each value entered in the field to 128 characters. While we can use th ...

htmlangular

Executing operations on checkboxes on a webpage without access to model files

I am facing an issue with accessing the models file due to encryption in the software. Currently, my checkboxes are implemented using Ajax within a PHP query. Since it is Ajax-based, I am unable to manipulate actions through the URL. My goal is to extract ...

javascriptphphtml

The bootstrap pull-left and pull-right classes are not functioning properly when used in Angular

I'm currently working on this project in Angular and using Bootstrap. I'm trying to display the name and description on the left side and the image on the right, but it's not working as expected. Any help would be appreciated. You can find ...

cssangulartwitter-bootstrap

Ways to clear away adhesive header and maintain its fixed position

I've been tinkering with my website, which you can find at this link: . I used the html5 up template for it, and the template came with a sticky header. However, when the site is viewed on a smaller screen, there's an ugly gap that forms between ...

javascriptcsshtmlscrollsticky

Tips for effectively utilizing jQuery datatables plugins?

Currently, I am working on a project that involves using datatables, so I decided to utilize datatables plugins from datables.net. Despite following all the instructions provided, I encountered an issue where the search input field and entries label were n ...

jqueryhtmlcssdatatablesbootstrap-4

Utilizing Selenium for web scraping on Google Maps consumes an excessive amount of data

Scraping travel times from Google Maps is a task I have successfully accomplished. The code below scrapes travel times between 1 million random points in Tehran utilizing multiprocessing for efficiency. You can run the code provided in a terminal environme ...

pythonhtmlseleniumwebdriver