Html 网站按钮下划线赢得'；Don’别走开，我怎么才能解决这个问题？

我对网络开发非常陌生，正在为自己制作一个网站。我在我的网站上遇到了一个关于按钮的问题，其中按钮的文本下划线不会消失。出于某种原因，即使在应用

文本装饰后：无！重要的它仍然在那里

了解一下我要做的事情的背景信息

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

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

图像：



代码：

这是一对按钮的HTML：

由于您的按钮位于[a tag]内，并且它已作为默认CSS加下划线，因此您应该将以下CSS应用于[a tag]，它也应该可以工作

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

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

真管用！非常感谢。链接中的按钮无效
.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, 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, 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 {
    text-decoration: none;
    outline: none;
}

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