如何在 HTML 中创建预期的按钮？

如何解决如何在 HTML 中创建预期的按钮？

第一张图片是在 Python 在线课程中拍摄的。第二张图片是在我自己的网站上拍摄的。我想模仿这个网站来练习 html/css 技能。我想知道的是如何创建预期的按钮。感谢您的回复。

/*Here is my CSS code,which is unfinished.*/
.Matter a:hover{
    background-color: rgb(230,230,230);
}





<!-- Here is my HTML code -->
<div class='Matter'>
    <h1>Welcome to the Capstone</h1>
        <p><a href='#'><b>Video:</b> Introduction: Welcome to the Class</a></p>
        <p><a href='#'><b>Reading:</b> Capstone Overview</a></p>
        <p><a href='#'><b>Reading:</b> Help Us Learn More About You!</a></p>
</div>

解决方法

让我们一步步解决您的问题：

链接样式：我们将添加一些 padding、text decoration 和 color。我们还使用 display inline-block 使我们的链接全宽。

.Matter a {
  padding: 8px;
  display: inline-block;
  width: 100%;
  text-decoration: none;
  color: black;
}

添加悬停样式：

.Matter a:hover{
    background-color: rgb(230,230,230);
}

添加checkmark：我们需要使用CSS Pseudo element ::before在链接前添加复选标记。为了在复选标记周围添加绿色圆圈，我们使用了一些 margin、填充、border radius、背景、颜色和 font size。我们还使用 position 来调整复选标记圆圈位置。

.Matter a::before {
  content: '?';
  margin-right: 8px;
  padding: 2px 4px;
  background: green;
  border-radius: 50%;
  color: white;
  font-size: 12px;
  position: relative;
  top: -2px;
}

这是完整的解决方案。你可以随心所欲地玩它。

.Matter a {
  padding: 8px;
  display: inline-block;
  width: 100%;
  text-decoration: none;
  color: black;
}

.Matter a:hover{
    background-color: rgb(230,230);
}

.Matter a::before {
  content: '?';
  margin-right: 8px;
  padding: 2px 4px;
  background: green;
  border-radius: 50%;
  color: white;
  font-size: 12px;
  position: relative;
  top: -2px;
}

<div class='Matter'>
    <h1>Welcome to the Capstone</h1>
        <p><a href='#'><b>Video:</b> Introduction: Welcome to the Class</a></p>
        <p><a href='#'><b>Reading:</b> Capstone Overview</a></p>
        <p><a href='#'><b>Reading:</b> Help Us Learn More About You!</a></p>
</div>