'How do i make my button link to the next page without changing the styling of the code? Where am i getting it wrong?

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

Here is the HTML:

  <div class="image-round-fit">

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

    <span class="caption">Hello World</span></br>

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

  </div>

Here is the CSS

.btn {

background-color: DodgerBlue;

border: none;

color: white;

margin: 50px;

padding: 12px 30px;

cursor: pointer;

font-size: 20px;

display: flex;

align-items: center;

justify-content: center;

}

.btn:hover {

background-color: rgb(255,94,0);

}

htmlcss


Solution 1:[1]

Try this:

.btn {
  background-color: DodgerBlue;
  border: none;
  color: white;
  margin: 50px;
  padding: 12px 30px;
  cursor: pointer;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
<div class="image-round-fit">
  <a href="#" class="btn btn-info role=button">Click Next</a>
</div>

It is kind of weird that you added the hover css code, because this is the origin of your problem, can you explain why you did this?

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Emiel VdV

Related Questions