求助：按钮内第二行文本对应的超链接无法点击

我的按钮中第二行文本的超链接无法点击（失效），相关截图如下：

现附上HTML和CSS代码，恳请帮忙排查解决。

代码片段 #

CSS代码

/* CSS file, created by heathology, https://heathology.github.io/, on 7.17.2002. 
Gradient buttons adapted from Zach Cole (https://codepen.io/zachacole/pen/KdGzgb).*/

body {
    font-family: Helvetica, sans-serif;
}

/* logo */
.logo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: auto;
    max-width: 336px;
}

h1, p {
    text-align: center; 
}

/* Main Content Container */
.content {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    max-width: 520px;
    color: #000000;
    text-align: center;
}

@media (max-width: 576px) {
    .content {
        width: 50%;
      }
     
  }
  
  @media (max-width: 768px) {
    .content {
      width: 50%;
    }
    
}
/* 2778x1284 pixels at 458ppi */
@media only screen 
    and (device-width: 428px) 
    and (device-height: 926px) 
    and (-webkit-device-pixel-ratio: 3) { 
    
    }

/* Project Navigation Links */
.nav {
    text-align: center;
}

/* infite gradient shift on hover buttons */

#outer
{
    width:100%;
    text-align: center;
}

.inner
{
    display: inline-block;
}

.button-container {
    text-align: center;
    position: relative;
    width: 220px;
    margin: 0 0 15px auto;
    cursor: pointer;
}

button {
    position: relative;
    height: 50px;
    width: 180px;
    border: 0;
    border-radius: 5px;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.2em;
    overflow: hidden;
    box-shadow: 0 4px 12px 0 rgba(152, 160, 180, 10);
    z-index: -2;
    display: inline-block;
    color:aliceblue;
}


.fill-one {
    position: absolute;
    background-image: linear-gradient(to right, #E040FB, #00BCD4);
    background-size: 150% 150%;
    height: 70px;
    width: 320px;
    border-radius: 5px;
    margin: -40px 0 0 -140px;
    z-index: -2;
    transition: all 0.4s ease;
}

.button-container-one:hover .fill-one {
    -webkit-transform: translateX(100px);
    -moz-transform: translateX(100px);
    transform: translateX(100px);
}

.fill-two {
    position: absolute;
    background-image: linear-gradient(to right, #E040FB, #00BCD4);
    background-size: 150% 150%;
    height: 70px;
    width: 320px;
    border-radius: 5px;
    margin: -40px 0 0 -140px;
    z-index: -2;
    transition: all 0.4s ease;
}

.button-container-two:hover .fill-two {
    -webkit-transform: translateX(100px);
    -moz-transform: translateX(100px);
    transform: translateX(100px);
}

.fill-three {
    position: absolute;
    background-image: linear-gradient(to right, #E040FB, #00BCD4);
    background-size: 150% 150%;
    height: 70px;
    width: 320px;
    border-radius: 5px;
    margin: -40px 0 0 -140px;
    z-index: -2;
    transition: all 0.4s ease;
}

.button-container-three:hover .fill-three {
    -webkit-transform: translateX(100px);
    -moz-transform: translateX(100px);
    transform: translateX(100px);
}
@-webkit-keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@-moz-keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

HTML代码

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8" />
        
        <title>heathology's Github Page</title>
        <link rel="stylesheet" href="css/styles.css">
        <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    </head>
    <body>
    <div class="content">
        <header><h1>Hello World!</h1></header>
        <div><img class="logo" src="img/Heath-Media-Designs-Logo-2022.png" width="500" height="560"></div>
        <p>My name is Jesse Heath, aka heathology. <br>I am a self taught web developer and graphic designer. <br>HTML and WordPress are my forte.</p>
        <h1>My Projects</h1>
        <div id="outer">
            <div class="button-container button-container-one inner">
                <a href="cafe-menu/index.html"><button>
                Cafe Menu
                <div class="fill-one"></div>
            </button></a>
            </div>
            <div class="button-container button-container-two inner">
                <a href="registration-form/index.html"><button>
                Registration Form
                <div class="fill-two"></div>
            </button></a>
            </div>
            <div class="button-container button-container-three inner">
                <a href="survey-form/index.html"><button>
                Survey Form
                <div class="fill-three"></div>
            </button></a>
            </div>
            <div class="button-container button-container-three inner">
                <a href="rothko-painting/index.html"><button>
                Rothko Painting
                <div class="fill-three"></div>
            </button></a>
            </div>
            <div class="button-container button-container-three inner">
                <a href="css-flexbox-photo-gallery/index.html"><button>
                CSS Flexbox Photo Gallery
                <div class="fill-three"></div>
            </button></a>
            </div>
            <div class="button-container button-container-three inner">
                <a href="css-nutrition-label/index.html"><button>
                CSS Typography Nutrition Label
                <div class="fill-three"></div>
            </button></a>
            </div>
        </div>
    </div>
    </body>
    </html>

核心原因 #

1. HTML结构不规范：用<a>包裹<button>不符合HTML标准，按钮元素会拦截部分点击事件，尤其是文本换行后，第二行的点击区域会被按钮的固定高度限制。
2. CSS属性冲突：
   • button设置了z-index: -2，导致按钮位于链接下方，部分点击区域无法触发链接事件。
   • button的固定height: 50px+overflow: hidden，让换行后的第二行文本超出按钮可点击范围。
   • 阴影值rgba(152, 160, 180, 10)无效，透明度应在0-1之间。

解决方案（推荐重构为链接模拟按钮） #

放弃<button>元素，直接用<a>标签实现按钮效果，确保整个文本区域可点击。

修改后的HTML

<div id="outer">
    <div class="button-container button-container-one inner">
        <a href="cafe-menu/index.html" class="button-link">
            Cafe Menu
            <div class="fill-one"></div>
        </a>
    </div>
    <!-- 其他按钮按此格式修改 -->
</div>

修改后的CSS

/* 替换原button样式为.button-link */
.button-link {
    position: relative;
    display: inline-block;
    min-height: 50px;
    width: 180px;
    border: 0;
    border-radius: 5px;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.2em;
    overflow: hidden;
    box-shadow: 0 4px 12px 0 rgba(152, 160, 180, 0.1);
    color: aliceblue;
    text-decoration: none;
    padding: 10px;
    line-height: 1.4;
}

/* 调整渐变层z-index，确保在链接下方 */
.fill-one, .fill-two, .fill-three {
    z-index: -1;
}

备选方案（保留button结构） #

如果必须保留<button>，调整以下CSS：

button {
    position: relative;
    height: auto;
    min-height: 50px;
    width: 180px;
    border: 0;
    border-radius: 5px;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.2em;
    box-shadow: 0 4px 12px 0 rgba(152, 160, 180, 0.1);
    display: inline-block;
    color: aliceblue;
    padding: 10px;
    cursor: pointer;
    /* 移除z-index: -2和overflow: hidden */
}

.fill-one, .fill-two, .fill-three {
    z-index: -1;
}

内容的提问来源于stack exchange，提问作者heathology