使用 href 属性制作按钮时如何删除蓝色下划线和文本？答案

【问题标题】：How to remove the blue underline and text when making a button with the href property?使用 href 属性制作按钮时如何删除蓝色下划线和文本？
【发布时间】：2021-07-07 18:28:45
【问题描述】：

所以我正在尝试制作一个按钮，但是当我将其设为链接按钮时，我不喜欢它有蓝色下划线和蓝色文本，代码如下：

           <a class="button" href = "howtomakebread.html"> how to make bread!</a>
         </div>
       </div>



      div.breadbutton {
         background-color: black;
         width: 150;
         height: 25;
         text-align: center;
         margin: 10px;
         margin-top: 10px;
         padding: 10px;
         color: white;
         position:relative; top:-10px
       }```




That is the code itself, comment if I need to supply more of my code to fully answer this, thanks!

【问题讨论】：

大声笑，请 - stackoverflow.com/questions/10143357/…

标签： html css button hyperlink href

【解决方案1】：

您可以这样做：<a class="button" href = "howtomakebread.html" style = "text-decoration: none; color: black;"> how to make bread!</a>

但是你做的是一个链接而不是一个按钮。如果你一个人做一个，请使用按钮标签

<button type="button" href = "howtomakebread.html" style = "text-decoration: none; color: black;"> how to make bread!</button>

如果你想使用 css 文件，我建议你制作一个单独的 css 并在 html 的头部调用它。

你的 html <button class="yourbutton" type="button" href = "howtomakebread.html" > how to make bread!</button>

你的 CSS

.yourbutton {
         text-decoration: none; 
         color: black;
       }

【讨论】：

【解决方案2】：

要删除下划线的 CSS 属性是：text-decoration: none;，要使其没有蓝色文本，只需将 CSS 中的颜色设置为任何其他颜色：color: white;。要使用 rgb 代码：color: rgb(255, 255, 255);，要使用 HEX：color: ffffff;

【讨论】：

【解决方案3】：

您的代码示例存在很多问题。

类名“breadbutton”不存在，您的代码只有“button”类
CSS 属性“height”和“width”应以测量类型结尾：“150px”

不过，为了更直接地解决您的问题，删除下划线的 CSS 属性是“text-decoration”。在您的示例中，我将使用 text-decoration: none;

这是一个代码示例，经过一些修改，可以完成我认为您想要做的事情。 https://jsbin.com/qiyobimehe/edit?html,css,output

【讨论】：