The hover effect fails to function properly after altering the background color. The default color setting is transparent

<button class="button-main slide">Slide Left</button>

.button-main{
  color: black; 
  outline: none;
  background: transparent;
  border: none;
  letter-spacing: 0.0625em;
  padding: 8px 10px; 
  text-transform: uppercase;
  font: bold 16px 'Bitter', sans- serif; 
  line-height: 2;
  position: relative;
  display: inline-block;
  margin-right: 20px;
  margin-bottom: 20px;
  cursor: pointer;
  text-decoration: none; 
  overflow: hidden;
  transition: all .5s;
}

.button-main :before,
.button-main :after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  background: #259f6c; 
  z-index: -1;
  transform: translate3D(0,-100%,0); 
  transition: all .5s;
}

.button-main :before {
  background: #fafcd6; 
  z-index: -2;
  transform: translate3D(0,0,0);
}

.button-main :hover {
    color: white;
}

.button-main :hover: after {
  transform: translate3D(0,0,0);
  transition: all .5s;
}

.slide :after {
  top: 0;
  z-index: -1;
  transform: translate3D(-101%,0,0);
}

.slide :hover :after {
  transform: translate3D(0,0,0);
  transition: all .5s;
}

The hover animation effect on the button is not functioning correctly when the background color of the button is altered to a solid color. By default, the button has a transparent background in the button-main class. What modifications are required to enable the slide hover effect when changing the button background to a different color like red?

Answer №1

I have modified the elements to display before instead of after for better visibility. I have also eliminated the before elements altogether.

<button class="button-main slide">Slide Left</button>
<style type="text/css">

.button-main{
 color: black; 
 outline: none;
 background: red;
  transform: translate3D(0,0,0);
 border: none;
 border-bottom: 4px solid #eee;
 letter-spacing: 0.0625em;
 padding: 8px 10px; 
 text-transform: uppercase;
 font: bold 16px 'Bitter', sans- serif; 
   line-height: 2;
  position: relative;
  display: inline-block;
 margin-right: 20px;
 margin-bottom: 20px;
 cursor: pointer;
text-decoration: none; 
 overflow: hidden;
  transition: all .5s;
}

.button-main:before{
  content: '';
  position: absolute;
  left: 0;
   top: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  background: #259f6c; 
  z-index: -1;
  transform: translate3D(0,-100%,0); 
  transition: all .5s;
}
   
.button-main:hover{
    color: white;
}

.button-main:hover:before{
  transform: translate3D(0,0,0);
  transition: all .5s;
}

/* //// Slide Left  //// */

.slide:before{
  top: 0;
  z-index: -1;
  transform: translate3D(-101%,0,0);
}

</style>

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

Visibility of the br tag is not detected

I need to keep one specific div visible on the page while hiding all other content. However, I am facing an issue where the <br> tag inside that div is not showing up. <div id='min320'>min 320px<br>screen width required</div ...

Vuejs responsive navbar with collapsible sidebar using Bootstrap or Bootstrap-Vue libraries

Vue.js is the framework I'm utilizing for my current project. In creating a dashboard section, I am seeking to implement a responsive design using either bootstrap, bootstrap-vue, or plain HTML and CSS. Below are the images of the desired dashboard -& ...

Learn how to extract data located between two specific tags using Java HtmlUnit

<span> <a></a> Hello <div>A plethora of irrelevant text</div> </span> My goal is to retrieve only the "Hello" from the webpage. While I can use XPath to target the span, calling .getTextContent() also includes the text ...

Is there a way I can implement a user-friendly playlist feature in my object-oriented HTML5 JS audio player that allows users

I have created a functional audio player using HTML5 and Javascript, along with some basic CSS. However, I am looking to enhance it by adding a clickable playlist feature. I want the name of the currently playing audio track to be displayed, and users shou ...

Using Javascript to Retrieve Icecast Metadata

I am currently developing a web radio application that utilizes AngularJS and Laravel 5 to read Icecast streams. Currently, I have implemented loading the stream into an html5 audio element which is working well. However, I am facing an issue where the vie ...

Could it be questionable XHTML originating from a conventional Haskell library?

Currently, I am working on resolving an issue with a program that generates XHTML in Haskell from UTF-8 text. The program is supposed to turn strings of text into valid XHTML entities, but it seems to be failing in doing so. I have imported Text.XHtml.Tran ...

What is the best way to align a table (datatable) to the left?

How can I align the table to the left without using float:left in the following code? Applying text-align: left to the parent element of the table doesn't seem to work as expected. http://jsfiddle.net/william/B4qJG/1 HTML: <div class="valueList" ...

Learn how to efficiently transfer a dynamic subtitle text value from an HTML5 video player to a database

I have successfully developed an HTML5 video player with subtitles. Currently, my goal is to allow the user to submit the subtitle text at a specific timestamp to a database. Despite trying various methods, I am facing challenges in fetching the subtitle t ...

Failure of default option to appear in dropdown menu in Angular

I currently have a dropdown list in my HTML setup like this: <select id="universitySel" ng-model="universityValue" ng-options="university._id for university in universities"> <option value="-1">Choose university</option> ...

Collaborating with interactive icon in input group

I'm having trouble getting the textbox and icon to be in the same line, like a bootstrap input group. The icon is also clickable. <div class="input-group"> <asp:textbox id="txtParentCategoryCode" runat="server" cssclass="input-text normal" m ...

Identify the index of a list item using a custom list created from buttons

When dealing with a dynamically built list like this: <ul id="shortcuts"> <li><input type="checkbox" value="false"/><button>foo</button><button>-</button></li> <li><input type="checkbox" value ...

Encountered a failure while loading modules in AngularJS

When I tried opening the index.html page using Chrome, I encountered an error stating that the correct modules could not be found. Uncaught SyntaxError: Unexpected token < angular.js:1 Uncaught SyntaxError: Unexpected token < controller.js:1 ...

Adjusting the tab size and space size to their default settings within VSCode

I'm currently facing an issue with my VSCode setup. I am trying to configure the space size to be equal to 1 and tab size to be equal to 2 as the default for every project. However, despite my efforts, it keeps reverting back to spaces: 4 for each new ...

What are some methods to achieve consistent alignment of input fields across different mobile devices using CSS?

I have been working on a login page that looks good on desktop and laptop devices. However, I am facing an issue with its display on mobile devices. The design appears differently on various mobile devices - for instance, it looks acceptable on an iPhone 1 ...

Is it possible to selectively process assets based on their type using Gulp and Useref?

Is it possible to selectively process css and js assets using gulp-useref based on the build type specified in the html tags? <!-- build:<type>(alternate search path) <path> --> ... HTML Markup, list of script / link tags. <!-- endbui ...

In my database, I have two tables: Table1 and Table2. To better illustrate my issue, I have included a picture for reference

https://i.stack.imgur.com/GQAMy.jpg I am facing a challenge with joining two tables, table1 and table2, in MySQL. I need assistance in creating the resultant table as shown in the attached picture. Your help in solving this issue would be greatly appreci ...

Creating dynamic and interactive web pages can be achieved by utilizing either $_POST or $_GET with Modal,

In the snippet below, you'll find the HTML code that pulls an array of 6 objects from a database and displays them in a Bootstrap row successfully. <div class="row products"> <?php while($product = mysqli_fetch_assoc($featured)) ...

Modify the stroke attribute of the <path> element using CSS

I have a generated svg path code that I want to customize using CSS to remove the default stroke. How can I override the stroke property and set it to none? code: <div class="container" style="position: absolute; left: 3px; z-index: 1;"> <svg he ...

Using JavaScript and HTML, create a click event that triggers a drop-down text

Can anyone help me with creating a dropdown feature using JavaScript, HTML, and CSS? I want to be able to click on the name of a project and have information about that project show up. Any suggestions on how I can achieve this? Thanks in advance! ...

Embed SQL parameter into HTML code

Every 24 hours, I have a SQL job that sends an email containing data extracted from my database tables. I store the data in : DECLARE @ReportContentBuilder table(LineSequence int identity, Line varchar(2000)) Here's how it's done : INSERT IN ...