CSS:似乎我必须按两次按钮才能转到另一页。

Question

所以，如果我点击" PROJECTEN "，据说它会把我带到PROJECTEN页面，但是它只是做我让它做的动画。

​

，即html，现在用于主页的CSS：

​

body{
background-color: black;

}

.projectenknop{
    position: relative;
    border-radius: 0 50px 0 50px;
    border: 1px solid white;
    font-family: "Bebas Neue";
    font-size: 2vw;
    color: #ffffff;
    margin: 10% 0 0 25%;
    width: 10vw;
    text-align: center;
    transition-duration: 0.4s;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
    background-color: transparent;
    
}

.projectenknop:after {
    content: "";
    background: #f1f1f1;
    display: block;
    position: absolute;
    padding-top: 300%;
    padding-left: 350%;
    margin-left: -20px !important;
    margin-top: -120%;
    opacity: 0;
    transition-duration: 0.8s;
}

.projectenknop:active:after {
    padding: 0;
    margin: 0;
    opacity: 1;
    transition: 0s;
}

.overknop {
    position: relative;
    border-radius: 50px 0 50px 0;
    border: 1px solid white;
    font-family: "Bebas Neue";
    font-size: 2vw;
    color: #ffffff;
    margin: 10% 0 0 50%;
    width: 10vw;
    text-align: center;
    transition-duration: 0.4s;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
    background-color: transparent;
    
}

.overknop:after {
    content: "";
    background: #f1f1f1;
    display: block;
    right: 0;
    position: absolute;
    padding-top: 300%;
    padding-left: 350%;
    margin-left: -20px !important;
    margin-top: -120%;
    opacity: 0;
    transition-duration: 0.8s;
    
}

.overknop:active:after {
    padding: 0;
    margin: 0;
    opacity: 1;
    transition: 0s;
}

#tekstkader{
    border: 0.1px solid black;
    width: 29.5vw;
    height: 180vh;
    margin: 13.4% 0 0 35.5%;
    text-align: center;
    font-family: "Bebas Neue";
    color: black;
    opacity: 0.7;
    font-size: 1.5vw;
}

#linkprojecten:link{
    color: azure;
    text-decoration: none;
}

#linkprojecten:visited{
    color: azure;
    text-decoration: none;
}

#linkprojecten:hover{
    color: azure;
    text-decoration: none;
}

#linkprojecten:active{
    color: azure;
    text-decoration: none;
}

<div class="rij">
        <div class="kol-6 kol-t-6 kol-m-6">
            <button class="projectenknop"><a id="linkprojecten" href="projecten.html">PROJECTEN</a></button>
            </div>
        <div class="kol-6 kol-t-6 kol-m-6">
            <button class="overknop">OVER</button>
            </div>
    </div>
    
    <div id="tekstkader">
        <br>Dit is een fanpagina over Alicha De Bevere,<br>een grafische studente in Ter Sterre.
    </div>

​

和现在的项目HTML和CSS:

​

body{
background-color: black;

}

.homeknop {
    position: relative;
    border-radius: 0 50px 0 50px;
    border: 1px solid white;
    font-family: "Bebas Neue";
    font-size: 2vw;
    color: #ffffff;
    margin: 10% 0 0 25%;
    width: 10vw;
    text-align: center;
    transition-duration: 0.4s;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
    background-color: transparent;
    
}

.homeknop:after {
    content: "";
    background: #f1f1f1;
    display: block;
    position: absolute;
    padding-top: 300%;
    padding-left: 350%;
    margin-left: -20px !important;
    margin-top: -120%;
    transition-duration: 0.8s;
    opacity: 0;
}

.homeknop:active:after {
    padding: 0;
    margin: 0;
    opacity: 1;
    transition: 0s;
}

.overknop {
    position: relative;
    border-radius: 50px 0 50px 0;
    border: 1px solid white;
    font-family: "Bebas Neue";
    font-size: 2vw;
    color: #ffffff;
    margin: 10% 0 0 50%;
    width: 10vw;
    text-align: center;
    transition-duration: 0.4s;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
    background-color: transparent;
    
}

.overknop:after {
    content: "";
    background: #f1f1f1;
    display: block;
    right: 0;
    position: absolute;
    padding-top: 300%;
    padding-left: 350%;
    margin-left: -20px !important;
    margin-top: -120%;
    opacity: 0;
    transition-duration: 0.8s;
    
}

.overknop:active:after {
    padding: 0;
    margin: 0;
    opacity: 1;
    transition: 0s;
}

#linkhome:link{
    color: azure;
    text-decoration: none;
}

#linkhome:visited{
    color: azure;
    text-decoration: none;
}

#linkhome:hover{
    color: azure;
    text-decoration: none;
}

#linkhome:active{
    color: azure;
    text-decoration: none;
}

<video autoplay muted loop id="bgvideo">
  <source src="BGVIDEOPROJECTEN.mp4" type="video/mp4">
</video>
    
    <div class="rij">
        <div class="kol-6 kol-t-6 kol-m-6">
            <button class="homeknop"><a id="linkhome" href="index.html">HOME</a></button>
            </div>
        <div class="kol-6 kol-t-6 kol-m-6">
            <button class="overknop">OVER</button>
            </div>
    </div>

​

所以是的，我想不出来。我还想让按钮在我悬停后做动画，但它只是不工作。车开了，到处都是。

Answer 1

尝试切换链接和按钮的顺序，即将<button>放在<a>中。