按钮旁出现水平短线的成因是什么？如何去除？

你的JOIN按钮外侧出现两条水平短线，原因有两个：

• 包裹按钮的<a>标签默认带文本下划线（text-decoration: underline），这是第一条线
• JOIN按钮本身设置了border-style: solid的边框，这是第二条线

其他按钮（比如SUBSCRIBE）因为设置了border: none，所以只显示a标签的下划线但不易察觉；移除a标签后，下划线消失，剩下的就是按钮自带的边框。

解决办法 #

给包裹按钮的<a>标签去掉默认文本下划线即可，同时可以合并分散的<style>标签让代码更规范：

<style>
  /* 去掉a标签默认下划线 */
  a {
    text-decoration: none;
  }

  .subscribe-button {
    background-color: rgb(206, 53, 53);
    color: white;
    border: none;
    height: 42px;
    width: 100px;
    border-radius: 2px;
    cursor: pointer; 
    margin-right: 8px;
  }

  .join-button {
    background-color: white;
    color: rgb(94, 122, 236);
    height: 42px;
    width: 66px;
    border-color: rgb(41, 118, 211);
    border-style: solid;
    border-width: 1px;
    border-radius: 2px;
    cursor: pointer;
  }

  .tweet-button {
    background-color: rgb(29,155,240);
    color: white;
    font-weight: bold;
    font-size: 15px;
    height: 36px;
    width: 70px;
    cursor: pointer;
    border: none;
    border-radius: 18px;
    margin-left: 8px; 
  }
</style>

如果不想全局修改所有a标签，也可以给包裹按钮的a标签单独加类：

.button-link {
  text-decoration: none;
}

然后给每个a标签添加类名：

<a href="https://www.youtube.com/" target="_blank" class="button-link">
  <button class="subscribe-button">SUBSCRIBE</button>
</a>

<a href="https://www.facebook.com" target="_blank" class="button-link">
  <button class="join-button">JOIN</button>
</a>

<a href="https://twitter.com/" target="_blank" class="button-link">
  <button class="tweet-button">Tweet</button>
</a>

处理后，a标签的下划线会被移除，JOIN按钮仅保留你设置的边框，就不会出现两条短线了。

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