制作一个 CSS HTML 按钮

Question

我的 default.aspx 页面中有一个标准按钮。

<asp:Button ID="Search_Button" runat="server" Text="Search" 
                      onclick="Search_Button_Click" />

像这样，我的项目中有很多按钮。我想做的是让按钮看起来很漂亮，我知道它可以在 CSS 文件中完成，但我不知道该怎么做。

我有这个 CSS 代码，但它在锚点中，我不知道如何用我的 asp:Button 类实现该类。

a.button {
/* Sliding right image */
background: transparent url('button_right.png') no-repeat scroll top right; 
display: block;
 float: left;
     height: 32px; /* CHANGE THIS VALUE ACCORDING TO IMAGE HEIGHT */
 margin-right: 6px;
 padding-right: 20px; /* CHENGE THIS VALUE ACCORDING TO RIGHT IMAGE WIDTH */
 /* FONT PROPERTIES */
 text-decoration: none;
    color: #000000;
 font-family: Arial, Helvetica, sans-serif;
  font-size:12px;
  font-weight:bold;
   }
  a.button span {
  /* Background left image */ 
   background: transparent url('button_left.png') no-repeat; 
   display: block;
   line-height: 22px; /* CHANGE THIS VALUE ACCORDING TO BUTTONG HEIGHT */
    padding: 7px 0 5px 18px;
   } 
    a.button:hover span{
    text-decoration:underline;
         }

任何帮助将不胜感激。谢谢

Answer 1

您发布的 CSS 将应用于锚元素。 ASP.NET 中的按钮不是锚点，它们是输入元素。

你可以做一些事情来让你的按钮样式。

最简单的方法是更改​​您发布的 CSS。不要将其应用于<a> 元素，而是将其应用于<input type="submit">。这样做：

input[type="submit"] 
{
    /* Sliding right image */
    background: transparent url('button_right.png') no-repeat scroll top right; 
    display: block;
    float: left;
    height: 32px; /* CHANGE THIS VALUE ACCORDING TO IMAGE HEIGHT */
    margin-right: 6px;
    padding-right: 20px; /* CHENGE THIS VALUE ACCORDING TO RIGHT IMAGE WIDTH */
    /* FONT PROPERTIES */
    text-decoration: none;
    color: #000000;
    font-family: Arial, Helvetica, sans-serif;
    font-size:12px;
    font-weight:bold;
 }
 input[type="submit"]:hover
 {
    text-decoration:underline;
 }

这会将样式应用于受您的 CSS 影响的所有按钮。请注意，您还有 a.button span 的样式，我不太确定您要做什么。如果您提供有关您想要设计的样式的更多详细信息，我们将能够为您提供帮助。我暂时把它删掉了。

如果您想使用更具体的东西——例如，只为按钮设置样式，您也可以这样做。为此，您需要在 ASP 标记中添加一个 CSS 类，指定您要使用的 CSS 类：

<asp:Button ID="Search_Button" runat="server" Text="Search" 
                      onclick="Search_Button_Click" CssClass="my-button" />

然后，在您的 CSS 中，您将更改我在上面发布的规则。而不是input[type="submit"] 你会选择：

input[type="submit"].my-button
{
    //...
}

始终尝试在 CSS 中使用尽可能通用的规则。如果您网站中的所有按钮都看起来像这样，那么请使用第一个选项，这样您的 CSS 会更简单。

Answer 2

如果 asp:Button 呈现为 HTML-input-元素，请在 css 中的任何位置使用 input#Search_Button 而不是 a.button……如果 asp:Button 呈现为 HTML-button-元素, 使用button#Search_Button 而不是a.button

…顺便说一句：如果可能的话，向您的 asp:Button 添加一个类以使用 css 声明而不是 id