Why is <button> not working?

HTML & CSS
1

Button are not working in my website. They don’t react when you hover over them or click them. I figured out that this problem has to do with my css-code for the background of my website.
Here is the code:
HTML:

<body class=“area”>
<ul class=“circles”>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<h1 class=“titeltext”> Aromatenquiz </h1>
<h4 class=“inter-textfont”> Bereit zum Quiz? </h4>
</body>
<button> <a href=“index1.html”> Button </a> <button>

CSS:

.area{
    background: rgb(241, 253, 254);  
    width: 100vw;
    height:100vh;
}

.circles{
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.circles li{
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: rgba(7, 136, 242, 0.2);
    animation: animate 25s linear infinite;
    bottom: -150px;
}

.circles li:nth-child(1){
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}


.circles li:nth-child(2){
    left: 10%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 12s;
}

.circles li:nth-child(3){
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 4s;
}

.circles li:nth-child(4){
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s;
}

.circles li:nth-child(5){
    left: 65%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}

.circles li:nth-child(6){
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
}

.circles li:nth-child(7){
    left: 35%;
    width: 150px;
    height: 150px;
    animation-delay: 7s;
}

.circles li:nth-child(8){
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s;
}

.circles li:nth-child(9){
    left: 20%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s;
}

.circles li:nth-child(10){
    left: 85%;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 11s;
}



@keyframes animate {
0%{
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }

    100%{
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }
}

If someone could help me identify the problem here, I would be very grateful. :sunny:

2

Buttons outside of forms dont have a default reaction, you have to tell it what to do on click (usually with Javascript).

Hovering would be a CSS thing… but your CSS doesnt apply any rules on hover. So your problem is you havent told it what to do?

2 Likes
3

You can’t have an anchor as a child of a button (or vice versa) as they are interactive elements and won’t work as expected. It would be like nesting an anchor inside an anchor and would be nonsense.

Just use the anchor for links and not buttons.

<a href=“index1.html”> Button </a>

Then apply the hover styles as required as already mentioned by @m_hutley above.

Also why is the button outside the closing tag of the body?

</body>
<button>

All your html must be inside the opening and closing body tag.

1 Like
4

For clarity: The HTML standard requires this. Most modern Browsers will try to correct your mistake silently by moving the button into the body when it renders the page because browsers try to be clever about people making errors like this, but you should still fix it.

3 Likes