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

【问题标题】：How to style a button inside an input tag如何在输入标签内设置按钮样式
【发布时间】：2016-04-13 09:55:36
【问题描述】：

嘿，我正在尝试在这里更改此（工作）代码行：

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

这里用这种格式（利用一个类）变成一个等价的语句：

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

我的问题是如何/在哪里输入在后一个代码块中的上述代码块中使用的彩色文本（“吉他”）。抱歉，如果这是一个不好的问题，我对 HTML 感到很糟糕。提前致谢。

【问题讨论】：

对于初学者来说，段落不能是按钮的子级。
我认为您正在寻找 value 属性；示例：<input type="button" class="inline" id="redirectButtons" value="Guitars">
如何只使用锚标记然后创建一个看起来像按钮的类。
如果您只需要知道如何设置按钮样式，只需使用 CSS。在您的 CSS 文件中，根据需要设置 button 的类属性。结帐w3schools.com/w3css/w3css_buttons.asp 以查看按钮的可用 CSS 选项。
链接中有一个按钮。如果你想要一个按钮，只需使用一个按钮。如果您想要一个超链接，请使用它。

标签： html css href

【解决方案1】：

或者，您可以设置<a> 标签的样式，使其看起来/行为像一个按钮。只需使用: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;}

&lt;a class="aBtn" href="DPS_Guitarspg3.html"&gt;Guitars&lt;/a&gt;

【讨论】：

【解决方案2】：

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

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

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

【讨论】：