如何避免单个按钮的样式/颜色影响站点内其他所有按钮

问题原因 #

你当前编写的CSS规则使用了全局a标签选择器，会匹配页面中所有的链接元素，因此会导致全站的链接/按钮样式都被统一修改。

解决方法 #

给需要单独设置样式的按钮添加专属类名，再将CSS规则绑定到这个类名上，即可保证样式仅作用于目标元素，不会影响其他页面内容。
修改后的完整代码如下：

<html>
<head>
  <style>
    /* 选择器新增类名限定，仅匹配带有custom-calendar-btn类的a标签 */
    .custom-calendar-btn:link,
    .custom-calendar-btn:visited {
      background-color: #E31837;
      color: white;
      width: 300px;
      padding: 10px 25px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      line-height: 1.3;
    }
    
    .custom-calendar-btn:hover,
    .custom-calendar-btn:active {
      background-color: #810001;
    }
  </style>
</head>
<body>
  <!-- 给目标a标签添加对应类名 -->
  <a class="custom-calendar-btn" href="https://calendly.com/akalmin-/15min?month=2021-10" target="_blank">想要了解如何将这些项目整合到你的课堂中吗？</a>
</body>
</html>

注：如果后续需要复用该按钮样式，只需给其他需要的元素加上custom-calendar-btn类即可，无需重复编写样式代码。

内容的提问来源于stack exchange，提问作者l117