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

Question

所以我想做一个按钮，但我不喜欢它有蓝色下划线和蓝色文本，当我把它做成 link 按钮时，代码如下：

           <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!

Answer 1

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

class 名称“breadbutton”不存在，您的代码只有 class“按钮”
CSS 属性“高度”和“宽度”应以测量类型结尾：“150px”

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

这是一个代码示例，其中进行了一些修改以实现我认为您想要的效果。 https://jsbin.com/qiyobimehe/edit?html,css,output

Answer 2

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

Answer 3

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

但是您制作的是 link 而不是按钮。如果你做一个使用按钮标签

<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;
       }

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

How to remove the blue underline and text when making a button with the href property?

html

css

button

hyperlink

href

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

How to remove the blue underline and text when making a button with the href property?

html

css

button

hyperlink

href

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