如何在不更改代码样式的情况下将按钮链接到下一页？我在哪里弄错了？答案

【问题标题】：How do i make my button link to the next page without changing the styling of the code? Where am i getting it wrong?如何在不更改代码样式的情况下将按钮链接到下一页？我在哪里弄错了？
【发布时间】：2022-02-13 04:42:57
【问题描述】：

如何在不改变样式的情况下让我的按钮链接到下一页？

这是 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>

这里是 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:悬停{

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

}

【问题讨论】：

标签： html css

【解决方案1】：

试试这个：

.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>

你添加了悬停css代码有点奇怪，因为这是你问题的根源，你能解释一下你为什么这样做吗？

【讨论】：