Remove line between buttons HTML-CodePudding

I'm doing an html project that requires me to have buttons as links, but as I did it, It had this hyperlink line in between. I'm not allowed to use css for this certain project, how do I fix it just by using html?

<a href="#C1">
        <button>First</button>
    </a>
    
    <a href="#C2">
        <button>Second</button>
    </a>
    
    <a href="#C3">
        <button>Third</button>
    </a>
    
    <a href="#C4">
        <button>Fourth</button>
    </a>

CodePudding user response：

You can’t change styling with only HTML, but you can add styles with the style attribute:


<a href="#C1">
        <button>First</button>
    </a>
    
    <a href="#C2">
        <button>Second</button>
    </a>
    
    <a href="#C3" style="text-decoration: none;">
        <button>Third</button>
    </a>
    
    <a href="#C4">
        <button>Fourth</button>
    </a>

Third button has no underline.

CodePudding user response：

You are using button inside anchor tag. This cause an underline below the button (if you have only 1 button, you cannot see it). You should use <a> inside <button>, like this:

<button>
    <a href="#C1">First</a>
</button>
...

This may cause text inside button have underline. We can remove this with CSS by text-decoration.