сделать кнопку 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, который я не совсем уверен, что вы пытаетесь сделать. Если вы дадите более подробную информацию о том, что вы пытаетесь стилизовать, мы сможем вам помочь. Я удалил это здесь сейчас.

Если вы хотите пойти с чем-то более конкретным - например, стиль кнопки, вы можете сделать это. Для этого вы должны добавить CSS-класс в разметку ASP, который определяет класс 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 -элемент, используйте input#Search_Button вместо a.button везде в CSS ... и если asp:Button рендерит как HTML- button -элемент используйте button#Search_Button вместо a.button

… кстати: если возможно, добавьте класс к вашему asp:Button, чтобы использовать css-объявление вместо id