CODEWITHSUNDEEP
javascripthtmlweb
Tom W
Tom W

Reputation: 61

Button's clickable area is above the button

I'm relitavely new to HTML and have ran into this error after using display: flex. My buttons clickable area is about 10px above the actual button, and when I use inspect element, the button highlight says its above where the visible button is.

<body>
    <h1 id="HomepageTitle" style="display: flex; justify-content: center; font-family: sans-serif; color: black;">CoderTom</h1>
    <h2 id="HomepageHeader" style="display: flex; justify-content: center; font-family: sans-serif; color: blue;">Home</h3>

    <div class="button-group" style="display: flex; justify-content: center;">
        <a href="contactpage.html"><button style="position : relative; top: 50px; background-color: rgb(0, 255, 55); font-family: sans-serif; font-weight: 700; color: black; width: 100%; height: 100%;">Contact</button></a>
    </div>
    <script src="application.js"></script>
</body>

Upvotes: 0

Views: 214

Answers (2)

Matias
Matias

Reputation: 1

I recommend you to style the tag like a button and add ' display: block ' Also remember to reset default styling of the browser

Upvotes: 0

Sebzu31
Sebzu31

Reputation: 33

property top: 50px in anchor tag moves element up 50px. I guess you wanted to give it to parent (.button-group)

Upvotes: 1

Related Questions