Iam trying to link a button to a different part of the page

[kylegilmartin5]

I am being dumb but can’t see what’s wrong. why I cant get the learn more button to link to text-info

class="page landing-page">
        <section class="clean-block clean-hero" style="background-image:url(&quot;assets/img/tech/topimg.jpg&quot;);color:rgba(0, 0, 0, 0.32);">
            <div class="text">
                <h2>Anfield </h2>
                <p>Anfield is a football stadium in Anfield, Liverpool, Merseyside, 
                    England, which has a seating capacity of 54,074, making it the
                     seventh largest football stadium in England..</p><button class="btn btn-outline-light btn-lg"
                      id="learnmore" <a href="#text-info">Learn More</button></a> </div>
        </section>
        <section class="clean-block clean-info dark">
            <div class="container">
                <div class="block-heading">
                    <h2  id="text-info" class="text-info">Info</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quam urna, dignissim nec auctor in, mattis vitae leo.</p>
                </div>

[SamA74]

The HTML is invalid. You don’t close the opening button tag and the nesting is wrong, there is an element overlap. Also you can’t have an anchor inside a button, you have a button or an anchor, not both.
In this case an anchor would be appropriate.
If you want to anchor to look like a button, use CSS.

[kylegilmartin5]

Thanks

[Erik_J]

The button is a form element, so it should be in a form with the desired action. Try this example:

<form action="#text-info">
    <button class="btn btn-outline-light btn-lg"  id="learnmore" type="submit">Info</button>
</form>

Edit)
@SamA74 already gave a better solution, as the form needs more style added.

[kylegilmartin5]

@SamA74 @Erik_J

Ya got it working with a anchor thanks for the the help lads