Why are the hyperlinks in my buttons not working on the second line?-CodePudding

Why aren't my hyperlinks clickable (working) in my buttons on the second line of text?

here is the working Link

I am including my html code and my css code below. I thought that the CSS for the button or button container or button fill might be cutting of the link, but I am not figuring it out. The solution is evading me. Does anyone else have any thoughts after reviewing the code below?

/* 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%;
    }
}

<!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 >
        <header><h1>Hello World!</h1></header>
        <div><img  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 >
                <a href="cafe-menu/index.html"><button>
                Cafe Menu
                <div ></div>
            </button></a>
            </div>
            <div >
                <a href="registration-form/index.html"><button>
                Registration Form
                <div ></div>
            </button></a>
            </div>
            <div >
                <a href="survey-form/index.html"><button>
                Survey Form
                <div ></div>
            </button></a>
            </div>
            <div >
                <a href="rothko-painting/index.html"><button>
                Rothko Painting
                <div ></div>
            </button></a>
            </div>
            <div >
                <a href="css-flexbox-photo-gallery/index.html"><button>
                CSS Flexbox Photo Gallery
                <div ></div>
            </button></a>
            </div>
            <div >
                <a href="css-nutrition-label/index.html"><button>
                CSS Typography Nutrition Label
                <div ></div>
            </button></a>
            </div>
        </div>
    </div>
    </body>
    </html>

CodePudding user response：

<div >
    <header>
        <h1>Hello World!</h1>
    </header>
    <div><img  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">
        <a href="cafe-menu/index.html">
            <div >
                <button>
                    Cafe Menu
                    <div ></div>
                </button>
            </div>
        </a>
        <a href="registration-form/index.html">
            <div >
                <button>
                    Registration Form
                    <div ></div>
                </button>
            </div>
        </a>
        <a href="survey-form/index.html">
            <div >
                <button>
                    Survey Form
                    <div ></div>
                </button>
            </div>
        </a>
        <a href="rothko-painting/index.html">
            <div >
                <button>
                    Rothko Painting
                    <div ></div>
                </button>
            </div>
        </a>
        <a href="css-flexbox-photo-gallery/index.html">
            <div >
                <button>
                    CSS Flexbox Photo Gallery
                    <div ></div>
                </button>
            </div>
        </a>
        <a href="css-nutrition-label/index.html">
            <div >
                <button>
                    CSS Typography Nutrition Label
                    <div ></div>
                </button>
            </div>
        </a>
    </div>
</div>

Please replace this html code. You have to link whole div.

CodePudding user response：

you just need to add css:

.button-container a {
    display: block;
}

CodePudding user response：

The links themselves are working, but they don't take up the full space of their container. So, some parts of the button don't result in a redirect.

To fix this, all you have to do is set the display to block. Links <a> are automatically set to display: inline in css, which causes them not to fill their container. This selector will make all the links, which are direct children of your buttons, fit the container.

.button-container > a {
    display: block;
}

CodePudding user response：

Try to add Important Property.

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

}