Html Link going outside of button

Question

I am trying to make a header with a button on it that redirects you to other webpage. It works, but the link on the button is clickable not only on the button, but theres a grey rectangle to the left of it that you can click and it will also redirect you to the webpage. I've made the rectangle transparent, but you can still click on it. How do I make only the button clickable? The red circle is the annoying rectangle that links to the other website too that i'm trying to get rid of

(In the templates folder) Mainpage.html :

<!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>Dropdown test</title>
    <style>
        *{
          background-color: rgb(43, 43, 43);
            }
        .fixedh {
                background-color: #535353;
                overflow: hidden;
                position: fixed;
                top: 0;
                width: 100%;
                height: 100px;
 
            }
        .linkbtn {
            color: aqua;
            background: green;
            width: 70px;
            height: 40px;
            margin-left: 50px;
        }

        .linkbtn:hover {
            color: green;
            background: aqua;
            width: 70px;
            height: 40px;
            box-shadow: 0px 0px 5px;
        }
        
        .spec {
            font-size: 100px;
        }
        

    </style>
</head>
<body>
    <div class="fixedh">
        This is a header

        <a href="{{ url_for('index') }}">
            <button class="linkbtn">Click me :D</button>
        </a>
    </div>

    <p class="spec">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    <br> Dolorum, sit ullam delectus velit 
    <br> est voluptas quos voluptatem ad quibusdam
    <br> tempore nostrum explicabo saepe minima
    <br> maiores rem nobis dolore accusamus
    <br> voluptatibus obcaecati autem neque reiciendis
    <br> omnis. Ut doloremque excepturi, nihil fugit
    <br> culpa atque? Porro ipsam neque illum dignissimos
    <br> ipsa quas cum similique totam cumque, obcaecati,
    <br> reprehenderit quae temporibus ea placeat assumenda
    <br> corrupti eos fugit voluptatum! Hic sit, deleniti reiciendis aliquam earum at ut vitae autem libero atque quisquam a non eos ipsam expedita eaque et sunt, nisi veniam velit? Inventore soluta eveniet totam reiciendis ea pariatur quibusdam, fugit corporis optio in.</p>


</body>
</html>

(in the templates folder) index.html:

<!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>
    Hello
</body>
</html>

app.py:

from flask import Flask,render_template,url_for

app = Flask(__name__)

@app.route("/")
def Mainpage():
    return render_template("Mainpage.html")
@app.route("/index")
def index():
    return render_template("index.html")

if __name__ == '__main__':
    app.run(debug=True)

"index.html" and "app.py" are irrelevant to the problem. – gre_gor Oct 06 '22 at 00:42 — gre_gor, Oct 06 '22 at 00:42

score 1 · Answer 1 · answered Oct 06 '22 at 00:39

1

Make the link an inline-block.

.fixedh a {
    display: inline-block;
}

* {
  background-color: rgb(43, 43, 43);
}

.fixedh {
  background-color: #535353;
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 100%;
  height: 100px;
}

.linkbtn {
  color: aqua;
  background: green;
  width: 70px;
  height: 40px;
  margin-left: 50px;
}

.linkbtn:hover {
  color: green;
  background: aqua;
  width: 70px;
  height: 40px;
  box-shadow: 0px 0px 5px;
}

.spec {
  font-size: 100px;
}

.fixedh a {
  display: inline-block;
}

<div class="fixedh">
  This is a header

  <a href="https://google.com">
    <button class="linkbtn">Click me :D</button>
  </a>
</div>

answered Oct 06 '22 at 00:39

gre_gor

6,669
9
47
52

Hello thank you very much for answering , I fixed it by changing it into a form instead. Thank you! – Beginnercoder Oct 06 '22 at 01:01
Using forms instead of anchors for links is bad semantically. Screen readers won't recognize it as a link. – gre_gor Oct 06 '22 at 01:10
Related post: [
or ? What's the difference?](https://stackoverflow.com/q/11582286)
– gre_gor Oct 06 '22 at 01:13
Do you even need a button? You can style the link whatever you like. – gre_gor Oct 06 '22 at 01:14
Yes, I changed it from a button to a link. I dont really like putting links in buttons anyway ! – Beginnercoder Oct 07 '22 at 21:07

score 0 · Accepted Answer · answered Oct 06 '22 at 00:23

0

So instead of wrapping the button around an <a> tag, you would wrap the button around a tag. So instead your code from lines 48-50 would look like this:

<form action="{{ url_for('index') }}">
    <button class="linkbtn">Click me :D</button>
</form>

Hopefully this helps any issues you have!

answered Oct 06 '22 at 00:23

elpython3

52
6

This worked! I had to make the background of the form transparent so the header wouldn't get split. Thank you! – Beginnercoder Oct 06 '22 at 00:59

score -1 · Answer 3 · answered Oct 06 '22 at 00:31

-1

Instead of wrapping your button inside an a tag, you can use onClick event on your button

   <button class="linkbtn"  
            onClick="window.location.href='{ 
                     url_for('index') }';">
      Click me :D
   </button>

answered Oct 06 '22 at 00:31

Shafian

100
4

1

Hello, this worked but I dont really know JavaScript. I fixed it by changing it into a form. Thank you for responding! – Beginnercoder Oct 06 '22 at 01:02

Html Link going outside of button

3 Answers3