Make span behind of button text

Question

There is 2 spans in a button. One of them for button text and another one for ripple effect when button is hover, but when I hover button ripple span is in front of button text span while I use z-index for both of them.

.login {
    position: relative;
    border: rgb(0, 175, 175) 1px solid;
    background-color: white;
    border-radius: 20px;
    height: 30px;
    color: rgb(0, 175, 175);
    overflow: hidden;
    align-items: center;
}

.ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(1);
    background-color: rgb(0, 175, 175);
    z-index: 0;
    width: 29px;
    height: 29px;
    left: -30px;
    top: 0;
    bottom: 0;
    transition: transform ease 1s;
}

.login:hover .ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(20);
    background-color: rgb(0, 175, 175);
    width: 20px;
    height: 20px;
    transition: transform ease 1s;
    z-index: 0;
}

.login:hover{
    color: white;
}

        <button class="login">
            <span style="z-index: 10;"> my button </span>
            <div class="ripple"></div>
        </button>

Note that "the `z-index` CSS property sets the z-order of a [*positioned*](https://developer.mozilla.org/en-US/docs/Web/CSS/position) *element*..." ([z-index](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index)) — showdev, Sep 14 '22 at 05:51

score 0 · Accepted Answer · answered Sep 14 '22 at 05:48

.login {
    position: relative;
    border: rgb(0, 175, 175) 1px solid;
    background-color: white;
    border-radius: 20px;
    height: 30px;
    color: rgb(0, 175, 175);
    overflow: hidden;
    align-items: center;
    color:#fff;
}

.ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(1);
    background-color: rgb(0, 175, 175);
    z-index: 0;
    width: 29px;
    height: 29px;
    left: -30px;
    top: 0;
    bottom: 0;
    transition: transform ease 1s;
}

.login:hover .ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(20);
    background-color: rgb(0, 175, 175);
    width: 20px;
    height: 20px;
    transition: transform ease 1s;
    z-index: 0;
}

<button class="login">
    <span style="z-index: 10; position: relative;"> my button </span>
    <div class="ripple"></div>
</button>

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Sep 19 '22 at 06:26

score 0 · Answer 2 · answered Sep 14 '22 at 05:48

0

Just add this to your code Ehsan jan:

.login span{
    position: relative
}

answered Sep 14 '22 at 05:48

BehRouz

1,209
1
8
17

score 0 · Answer 3 · answered Sep 14 '22 at 05:54

.login {
    position: relative;
    border: rgb(0, 175, 175) 1px solid;
    background-color: white;
    border-radius: 20px;
    height: 30px;
    color: rgb(0, 175, 175);
    overflow: hidden;
    align-items: center;
}

.login:hover {
    color:#fff;
}

.ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(1);
    background-color: rgb(0, 175, 175);
    z-index: 0;
    width: 29px;
    height: 29px;
    left: -30px;
    top: 0;
    bottom: 0;
    transition: transform ease 1s;
}

.login:hover .ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(20);
    background-color: rgb(0, 175, 175);
    width: 20px;
    height: 20px;
    transition: transform ease 1s;
    z-index: 0;
}

<button class="login">
    <span style="z-index: 10; position: relative;"> my button </span>
    <div class="ripple"></div>
</button>

.login {
    position: relative;
    border: rgb(0, 175, 175) 1px solid;
    background-color: white;
    border-radius: 20px;
    height: 30px;
    color: rgb(0, 175, 175);
    overflow: hidden;
    align-items: center;
    color:#fff;
}

.ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(1);
    background-color: rgb(0, 175, 175);
    z-index: 0;
    width: 29px;
    height: 29px;
    left: -30px;
    top: 0;
    bottom: 0;
    transition: transform ease 1s;
}

.login:hover .ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(20);
    background-color: rgb(0, 175, 175);
    width: 20px;
    height: 20px;
    transition: transform ease 1s;
    z-index: 0;
}

<button class="login">
    <span style="z-index: 10; position: relative;"> my button </span>
    <div class="ripple"></div>
</button>

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Sep 19 '22 at 12:35

score 0 · Answer 4 · answered Sep 14 '22 at 05:56

There are 3 reasons why I think you're not getting the expected outcome:

z-index does not work if you do not set the position of your element to anything. check this question for more: Why does z-index not work?
the text inside the span is the same color as the ripple, so it's not visible (even if somehow the z-indexing worked)
It may or may not have an effect but putting your ripple div after the span is probably covering it up.

Try the following to address these concerns:

Add this to your CSS:

.login:hover .button-text{
    position: relative;
    color: white;
    z-index: 10;
}

Modify your button span like so:

<button class="login">
     <div class="ripple"></div>
     <span class = "button-text"> my button </span>
</button>

Make span behind of button text

4 Answers4