CSS hover button effect- issue with z index and text colour-CodePudding

I am trying to create an effect on an anchor element so that when it is hovered over the button will light up and have a vibrant light effect.

The button that i want the effect to work on is a 'donate' button. I have reached almost the desired effect, however, when the button is hovered it lights up and then the text becomes unreadable.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

/* testing new code from here */

.container a {
  position: relative;
  display: inline-block;
  padding: 15px 30px;
  border: 2px solid #0f0;
  text-decoration: none;
  font-weight: 650;
  color: #fff;
  margin: 5px;
  letter-spacing: 0.45px;
  -webkit-box-reflect: below 0px linear-gradient(transparent, #0002);
  transition: 0.5s;
  transition-delay: 0s;
}

.container a:hover {
  color: #000;
}

.container a span {
  position: relative;
  z-index: 100;
}

.container a::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 2px;
  background: #0f0;
  box-shadow: 5px -8px 0 #0f0, 5px 8px 0 #0f0;
  transition: width 0.5s, left 0.5s, height 0.5s, box-shadow 0.5s;
  transition-delay: 1s, 0.5s, 0s, 0s;
}

.container a:hover::before {
  width: 60%;
  height: 100%;
  left: -2px;
  box-shadow: 5px 0 0 #0f0, 5px 0 0 #0f0;
  transition-delay: 0s, 0.5s, 1s, 1s;
}

.container a::after {
  content: "";
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 2px;
  background: #0f0;
  box-shadow: -5px -8px 0 #0f0, -5px 8px 0 #0f0;
  transition: width 0.5s, left 0.5s, height 0.5s, box-shadow 0.5s;
  transition-delay: 1s, 0.5s, 0s, 0s;
}

.container a:hover::after {
  width: 60%;
  height: 100%;
  right: -2px;
  box-shadow: -5px 0 0 #0f0, -5px 0 0 #0f0;
  transition-delay: 0s, 0.5s, 1s, 1s;
  color: #000;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title></title>
    <link href="index.css" rel="stylesheet" />
  </head>
  <body>
    <div >
      <header >
        <h1 >Animal Charity</h1>

        <nav >
          <a  href="">About us</a>
          <a  href="">Our Work</a>
          <a  href="">Success Stories</a>
          <a  href="">Shop</a>
          <a  href="">Contact us</a>
          <div >
            <a  href="">Donate</a>
          </div>
        </nav>
      </header>
    </div>
  </body>
  <footer></footer>
</html>

The reason i think it is an issue with the z index is because when i set it to 100 this should therefore bring the text back to the front, however, as i mentioned it does not reveal from behind the green of the box shadow even though i set the text colour to black. Any suggestions or help would be greatly appreciated. Thanks

CodePudding user response：

You might wrap your button text into e.g. span and position it:

body {background:grey}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

/* testing new code from here */

.container a {
  position: relative;
  display: inline-block;
  padding: 15px 30px;
  border: 2px solid #0f0;
  text-decoration: none;
  font-weight: 650;
  color: #fff;
  margin: 5px;
  letter-spacing: 0.45px;
  -webkit-box-reflect: below 0px linear-gradient(transparent, #0002);
  transition: 0.5s;
  transition-delay: 0s;
}
.container a span {position:relative; z-index:1;}

.container a:hover {
  color: #000;
}

.container a span {
  position: relative;
  z-index: 100;
}

.container a::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 2px;
  background: #0f0;
  box-shadow: 5px -8px 0 #0f0, 5px 8px 0 #0f0;
  transition: width 0.5s, left 0.5s, height 0.5s, box-shadow 0.5s;
  transition-delay: 1s, 0.5s, 0s, 0s;
}

.container a:hover::before {
  width: 60%;
  height: 100%;
  left: -2px;
  box-shadow: 5px 0 0 #0f0, 5px 0 0 #0f0;
  transition-delay: 0s, 0.5s, 1s, 1s;
}

.container a::after {
  content: "";
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 2px;
  background: #0f0;
  box-shadow: -5px -8px 0 #0f0, -5px 8px 0 #0f0;
  transition: width 0.5s, left 0.5s, height 0.5s, box-shadow 0.5s;
  transition-delay: 1s, 0.5s, 0s, 0s;
}

.container a:hover::after {
  width: 60%;
  height: 100%;
  right: -2px;
  box-shadow: -5px 0 0 #0f0, -5px 0 0 #0f0;
  transition-delay: 0s, 0.5s, 1s, 1s;
  color: #000;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title></title>
    <link href="index.css" rel="stylesheet" />
  </head>
  <body>
    <div >
      <header >
        <h1 >Animal Charity</h1>

        <nav >
          <a  href="">About us</a>
          <a  href="">Our Work</a>
          <a  href="">Success Stories</a>
          <a  href="">Shop</a>
          <a  href="">Contact us</a>
          <div >
            <a  href=""><span>Donate</span></a>
          </div>
        </nav>
      </header>
    </div>
  </body>
  <footer></footer>
</html>

CodePudding user response：

        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
        }

        /* testing new code from here */

        .container a {
            position: relative;
            display: inline-block;
            padding: 15px 30px;
            border: 2px solid #0f0;
            text-decoration: none;
            font-weight: 650;
            color: #fff;
            margin: 5px;
            letter-spacing: 0.45px;
            -webkit-box-reflect: below 0px linear-gradient(transparent, #0002);
            transition: 0.5s;
            transition-delay: 0s;
        }

        .container a:hover {
            color: #000;
        }

        .container a span {
            position: relative;
            z-index: 100;
        }

        .container a::before {
            content: "";
            position: absolute;
            left: -20px;
            top: 50%;
            transform: translateY(-50%);
            width: 20px;
            height: 2px;
            background: #0f0;
            box-shadow: 5px -8px 0 #0f0, 5px 8px 0 #0f0;
            transition: width 0.5s, left 0.5s, height 0.5s, box-shadow 0.5s;
            transition-delay: 1s, 0.5s, 0s, 0s;
            z-index: -1;
        }

        .container a:hover::before {
            width: 60%;
            height: 100%;
            left: -2px;
            box-shadow: 5px 0 0 #0f0, 5px 0 0 #0f0;
            transition-delay: 0s, 0.5s, 1s, 1s;
        }

        .container a::after {
            content: "";
            position: absolute;
            right: -20px;
            top: 50%;
            transform: translateY(-50%);
            width: 20px;
            height: 2px;
            background: #0f0;
            box-shadow: -5px -8px 0 #0f0, -5px 8px 0 #0f0;
            transition: width 0.5s, left 0.5s, height 0.5s, box-shadow 0.5s;
            transition-delay: 1s, 0.5s, 0s, 0s;
            z-index: -1;
        }

        .container a:hover::after {
            width: 60%;
            height: 100%;
            right: -2px;
            box-shadow: -5px 0 0 #0f0, -5px 0 0 #0f0;
            transition-delay: 0s, 0.5s, 1s, 1s;
            color: #000;
        }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <div >
        <header >
            <h1 >Animal Charity</h1>

            <nav >
                <a  href="">About us</a>
                <a  href="">Our Work</a>
                <a  href="">Success Stories</a>
                <a  href="">Shop</a>
                <a  href="">Contact us</a>
                <div >
                    <a  href="">Donate</a>
                </div>
            </nav>
        </header>
    </div>
</body>

</html>