如何在输入标签内设置按钮样式

Question

嘿，我正在尝试更改此（有效）代码行：

     *<a href="DPS_Guitarspg3.html">        
        <button style="background-color:rgb(0,0,5)"; type="button"> <p style="color:rgb(111,0,100);">  Guitars</p></button> </a>*

在此处将这种格式（利用class）转换为等效语句：

*<a href="DPS_Guitarspg3.html">
<input type="button" class="inline" id="redirectButtons">
</a>*

我的问题是how/where在后面的代码块中输入上述代码块中使用的彩色文本("Guitars")。抱歉，如果这是一个糟糕的问题，我对 HTML 感到很糟糕。提前致谢。

Answer 1

您希望按钮用作超链接。为了让您完全控制按钮的样式，您可以将按钮制作成图像文件并将图像文件放入超链接中。

<a href="DPS_Guitarspg3.html">
  <img src="image-of-button.png">
</a>

或者，您可以使用像 Bootstrap 这样的前端库。

Answer 2

或者，您可以将 <a> 标签的样式设置为 look/act，就像按钮一样。只需使用 :hover 和 :active，像这样

.aBtn{
  padding:5px 10px;
  text-decoration:none;
  color:rgb(111,0,100);
  background-color:rgb(0,0,5);border:1px solid transparent;
}
.aBtn:hover {color:white;}
.aBtn:active{border:1px solid orange;}

<a class="aBtn" href="DPS_Guitarspg3.html">Guitars</a>

如何在输入标签内设置按钮样式

How to style a button inside an input tag

html

css

href