网站按钮下划线不会消失，我该如何解决？

如何解决网站按钮下划线不会消失，我该如何解决？

我对 Web 开发很陌生，正在为自己制作一个网站。我遇到了有关我网站上按钮的问题，其中按钮的文本下划线不会消失。出于某种原因，即使在应用 text-decoration: none !important; 之后它仍然存在。

关于我正在尝试做的事情的一些背景

我添加了两个看起来相同的按钮，但它们链接到不同的东西。这是因为我希望在移动设备上更改链接。在 CSS 媒体查询中，我指定了在移动设备上显示的按钮。原始按钮很好，但我想在移动设备上使用的按钮出于某种原因带有紫色下划线。

我希望得到一些帮助来解决这个问题，因为在移动设备上显示时，下划线会使按钮看起来有点奇怪。我附上了下面其中一个按钮的一些图片和代码。

图片：

代码：

这是一对按钮的 HTML：

 <div class="cont3_left_wrapper">
   <h2 class="hd2_1">Header Text</h2>
   <p>
     Body Text
   </p>
   <a href="#/" id="header_button_3">
     <button type="button" class="btn_chat">Let's Chat</button>
   </a>
   <a href="#/" id="header_button_3_mob">
     <button type="button" class="btn_chat_mob" onClick="location.href='contact.html'">Let's Chat</button>
   </a>
 </div>

这是按钮的 CSS：

.btn_chat {
    padding: 13px 0 11px 0;
    background-color: #E84855;
    border-radius: 4px;
    border: none;
    text-decoration: none;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    color: white;
    Box-shadow: 0px 2.0407px 20.407px rgba(0,0.25);
    margin-top: 35px;
    width: 270px;
}

.btn_chat_mob {
    display: none;
    padding: 13px 0 11px 0;
    background-color: #E84855;
    border-radius: 4px;
    border: none;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    color: white;
    Box-shadow: 0px 2.0407px 20.407px rgba(0,0.25);
    margin-top: 35px;
    width: 270px;
}

@media screen and (max-width: 480px) {
    .btn_chat {
        display: none;
        width: 100%;
    }

    .btn_chat_mob {
        display: block;
        width: 100%;
        text-decoration: none !important;
    }
}

解决方法

   .btn_chat_mob {
        display: inline-block;
        width: 100%;
    }

,

由于您的按钮位于 [a 标签] 内并且它带有下划线作为默认 CSS，您应该将以下 CSS 应用到 [a 标签] 中，它也应该可以工作..

a {
    text-decoration: none;
    outline: none;
}

a:hover {
    outline: none;
}
a:focus {
    outline: none;
}