Sliding Button Effect

Store Design
, ,
1

Is someone able to help me with a hover effect for my “VIEW ALL” button? The colour overlay is fine, but the text gets overlayed by it. I want to keep the “VIEW ALL” text in white. I am guessing its something to do with the z-index but I can’t figure it out. Thank you. See screenshot for which button I mean on the homepage & also the code that I have already put in.

Screenshot 2025-08-02 at 19.49.53
Screenshot 2025-08-02 at 19.49.531920×1026 147 KB

Screenshot 2025-08-02 at 19.52.24
Screenshot 2025-08-02 at 19.52.241342×1654 324 KB

PW: ellaella

2

You’re right that the issue is related to z-index, but it’s also about layering and positioning. The white overlay is sliding in above the text because it’s using position: absolute and is being rendered on top of .button-text.

You need to make sure that:

  1. The .button-text stays above the sliding overlay (.button::before).
  2. The parent button has position: relative and overflow: hidden (which you already have).
  3. The z-index on .button-text is higher than the z-index of .button::before.

See if this CSS code does the trick.

.button {
  position: relative;
  overflow: hidden;
  z-index: 0; /* Ensure it's defined */
}

.button-text {
  position: relative;
  display: inline-block;
  color: #ffffff !important; /* White initial text */
  transition: color 0.4s ease;
  z-index: 2; /* Make sure this is above the overlay */
}

.button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: #f5c3b6;
  transition: left 0.4s ease;
  z-index: 1; /* Lower than text */
}

.button:hover::before {
  left: 0;
}

.button:hover .button-text {
  color: #ffffff !important;
}
3

Thank you for getting back to me. Unfortunately I just tried this and still no luck! the fill is sliding on top of the text still

4

Hi @ellacoker, great news I’ve fixed the issue for you!

You just need to remove this z-index:

.button:before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: #000;
    transition: left .4s ease;
    /* z-index: 1; */
}
![Screenshot 2025-08-02 at 19.52.24|405x500](upload://tOQqJkcTiA690s0vKDhCYTnJjrI.png)
5

wow! thanks so much!!