CSS hover button effect- issue with z index and text colour
Question
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 class="header-container"> <header class="main-header"> <h1 class="logo">Animal Charity</h1> <nav class="nav-links"> <a class="menu-link1" href="">About us</a> <a class="menu-link2" href="">Our Work</a> <a class="menu-link3" href="">Success Stories</a> <a class="menu-link4" href="">Shop</a> <a class="menu-link5" href="">Contact us</a> <div class="container"> <a class="donate" 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
2 answers
solution1
0 2022-08-30 16:13:52
You might wrap your button text into eg 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 class="header-container"> <header class="main-header"> <h1 class="logo">Animal Charity</h1> <nav class="nav-links"> <a class="menu-link1" href="">About us</a> <a class="menu-link2" href="">Our Work</a> <a class="menu-link3" href="">Success Stories</a> <a class="menu-link4" href="">Shop</a> <a class="menu-link5" href="">Contact us</a> <div class="container"> <a class="donate" href=""><span>Donate</span></a> </div> </nav> </header> </div> </body> <footer></footer> </html>
solution2
-1 2022-08-30 16:25:54
.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 class="header-container"> <header class="main-header"> <h1 class="logo">Animal Charity</h1> <nav class="nav-links"> <a class="menu-link1" href="">About us</a> <a class="menu-link2" href="">Our Work</a> <a class="menu-link3" href="">Success Stories</a> <a class="menu-link4" href="">Shop</a> <a class="menu-link5" href="">Contact us</a> <div class="container"> <a class="donate" href="">Donate</a> </div> </nav> </header> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Parallax effect in CSS - text overflows despite z index
Having issue with css hover effect
CSS/Javascript - button and link not detecting hover or click? Even with z index highest?
z-index not working with hover width effect in jquery
Make gradient background button with hover effect in css
z-index javascript css issue
hover colour transition slide effect
Z-index on hover
CSS ripple effect on Hover?
how can I give hover effect to overlapped nodes (z-index)
Related Tags