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?

htmlcss

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

What are the steps to update your profile picture using Angular?

In my Angular 6 application, I am implementing an image upload feature with the following code: Html: <img [src]="url ? url : 'https://www.w3schools.com/howto/img_avatar.png'"> <br/> <input type='file' (change)="onSelec ...

javascripthtmlcssangulartypescript

Update the division by clicking the button with a randomly generated JavaScript string element

Trying to solve a unique problem here as none of the proposed solutions on similar questions have worked for me. Apologies if I'm missing something, I'm new at this. The issue is with loading an empty div on my page using javascript and strings ...

javascriptjqueryhtmlajax

Styling with CSS or using tables: What should you choose?

Is there a way to replicate the frame=void functionality in CSS, or will I need to manually add frame=void to each table I create in the future? <table border=1 rules=all frame=void> I attempted to search for a solution online, but unfortunately, m ...

htmlcss

Is it possible for the ".filter" function to verify if the target contains multiple attributes?

I'm currently working on a checkbox filter setup and using Jquery's .filter to sort through some divs. Below is the snippet of Jquery code that I am using: $(document).ready(function(){ var checkboxes = $('div.filter-groups').find(&ap ...

javascriptjqueryhtmlcssfilter

What is the process for linking an HTML form to an API using Express?

How can I establish a connection between an HTML form and an API using Node.js with Express? This is what my form looks like: <form action="/api" id="myform" method="GET"> <fieldset id="question-set1" cl ...

htmlnode.jsexpress

What could be causing my jQuery handler to not capture my form submission?

I am developing a Ruby web application and using JQuery and AJAX to send/receive data. However, I am facing an issue where pressing the enter key does not submit the form. What should I do to ensure that my form submits successfully? Within my Foundation ...

javascriptjqueryhtmlajaxforms

Accordion border in Bootstrap should be applied to all items except the first one

I am currently implementing Bootstrap accordions in an Angular application and I am facing an issue where I want to have a colored border all around each accordion panel. The problem is that by default, Bootstrap removes the top border from all accordions ...

cssangularbootstrap-5bootstrap-accordion

Problems with aligning elements to both the left and right sides of the same line

Currently, I have two divs that I would like to float on the left and right sides. However, they seem to be sticking together and I can't seem to separate them.. HTML: <nav> <div id="nav_content"> <div id="home_ico ...

htmlcss

Utilizing CSS in Angular applications

I am currently working on an Angular 2 application and I am fairly new to Angular. I am facing an issue where my CSS does not seem to be applying properly. There are three key files involved: landing.component.html landing.component.scss landing.compone ...

cssangular

Utilizing Google Maps to display an infowindow upon clicking a location from a geojson file

I want to implement info windows that pop up when markers on a map are clicked. I used the sample code provided by Google (below) to create a marker map from geojson files dragged and dropped into the window. My goal is for the info windows to show text ta ...

javascripthtmlgoogle-maps

CSS class malfunction - various classes with identical functions

I'm new to the world of web development and design, embarking on a journey to learn all I can in these fields. Recently, I attempted to create unique hover styles for each menu button within my CSS classes-based menu list. However, I encountered an i ...

htmlcss

How can I use jQuery to create a new div element if it is not already present

I am familiar with how to add a class if it does not already exist, for example: $("ul:not([class~='bbox'])").addClass("bbox"); Alternatively, if(!$("ul").hasClass("class-name")){ $("ul").addClass("bbox"); } However, I am unsure how to c ...

javascriptjqueryhtml

Close the ionicPopup by tapping anywhere

Currently, I have implemented an ionicPopup that automatically closes after a certain time limit. However, I am wondering if there is a way to configure it to close with a single or double tap anywhere on the screen instead. While I am aware that setting a ...

cssangularjsionic-framework

The submenu is not aligned directly under its parent item

The sub-menu is not appearing below the parent item as expected. I have tried removing and adding the 'absolute' property, but it doesn't seem to have any effect. Check out the JS Fiddle for reference: http://jsfiddle.net/42qg5/ HTML Code ...

htmlcss

Is there a way to use jQuery to eliminate divs that contain multiple identical data values?

Is there a way to accomplish this? <div class="chat_timestamp_group" data-date="08-March-2016"></div> <div class="chat_timestamp_group" data-date="08-March-2016"></div> <div class="chat_timestamp_group" data-date="14-March-2016" ...

javascriptjqueryhtml

A guide on creating a clickable polygon in Vue.js using Konva

Is there a way to create an interactive polygon in Vue Konva where I can set each corner with a click? I haven't been able to find any resources other than the v-polygon which only creates predefined polygons. ...

javascripthtmlvue.jskonvajsvue-konva

Troubleshooting Symfony2 and Assetic: Why are my CSS-linked images not loading?

I've encountered an issue with my CSS sprite sheet that my CSS file seems unable to locate the image. Despite following the provided solution here, I'm still facing the same problem. The directory structure of my bundle is as follows: src/ v ...

csssymfonycss-spritesassetic

One way to enhance Razor helpers is by integrating parameters into them

Is there a way to create an HTML Helper similar to @Html.TextBoxFor(model => model.signature) that includes a data-id parameter in the generated input, like shown below? <input type="text" name="signature" data-id="No Signature" /> I understand ...

c#htmlasp.net-mvcrazorhtml-helper

Adjust the position if the height exceeds 100 pixels

Can someone help with this code issue? $(document).ready(function () { if ($('.pi-img').height() > 100) { $(this).css('top' , '30%'); console.log('yeah'); } }); I am encountering difficu ...

javascriptjquerycsshtml

Tips for embedding Javascript code within the window.write() function

I have a JavaScript function that opens a new window to display an image specified in the data variable. I want the new window to close when the user clicks anywhere on it. I've tried inserting some JavaScript code within window.write() but it doesn&a ...

javascriptphphtmlwindow.open