Make span behind of button text-CodePudding

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 >
            <span style="z-index: 10;"> my button </span>
            <div ></div>
        </button>

CodePudding user response：

.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 >
    <span style="z-index: 10; position: relative;"> my button </span>
    <div ></div>
</button>

CodePudding user response：

Just add this to your code Ehsan jan:

.login span{
    position: relative
}

CodePudding user response：

.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 >
    <span style="z-index: 10; position: relative;"> my button </span>
    <div ></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 >
    <span style="z-index: 10; position: relative;"> my button </span>
    <div ></div>
</button>

CodePudding user response：

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 >
     <div ></div>
     <span class = "button-text"> my button </span>
</button>