How do i make my button link to the next page without changing the styling?

  <div >

    <img src="images/pic.jpg" alt="photo" width="300px" height="300px" />

    <span >Hello World</span></br>

      <a href="#" >Click Next</a>

  </div>

CodePudding user response：

You can use CSS to do it. CSS is a language to style content in HTML.

a{
    color: black;
    text-decoration: none;
}

<a href = "#" class = "btn btn-info" role = "button">Click Next</a>

The a is the tag name it is relating to. The color and text-decoration are properties. The color changes the text color and the text-decoration changes extras to the text, including if you want to include underline or not.

Or maybe it was this? To not change the color to purple permanently.

a:visited{
    color: blue;
}
a:active{
    color: red;
}

<a href = "#" role = "button" class = "btn btn-info">Click Next</a>

The : stands for it relating to the a when in a condition. :visited stands for when you visited it, it will do whatever below. :active does whatever below when your mouse is down on the link. Remove the :active if you don't want it to change color at any state.

CodePudding user response：

Firstly, you have role=button inside your class. It should be outside your class as an attribute :

<a href="#"  role="button">Click Next</a>

This is for assistive technologies and button element should be used instead when possible.