造型一個asp.net按鈕

Question

我很新的Asp.net很抱歉，如果這是基本的。我試圖讓按鈕控件看起來有某種特定的方式。

我正在使用之前使用的CSS文件，會以某種方式設置我的標籤樣式。

如果我使用的是一個asp.net按鈕控件，該如何將這種樣式應用於按鈕控件？

我試着設置CSSClass ='按鈕'，但不起作用。我把標籤放在我的asp.net按鈕控件的周圍，但這只是讓asp.net進入了我的風格化按鈕。

任何想法我需要做什麼？

感謝您的任何幫助。

/******************** Button ********************/ 
button, 
.big-button { 
    display: inline-block; 
    border: 1px solid; 
    border-color: #50a3c8 #297cb4 #083f6f; 
    background: #0c5fa5 url(../images/old-browsers-bg/button-element-bg.png) repeat-x left top; 
    -webkit-background-size: 100% 100%; 
    -moz-background-size: 100% 100%; 
    -o-background-size: 100% 100%; 
    background-size: 100% 100%; 
    background: -moz-linear-gradient(
     top, 
     white, 
     #72c6e4 4%, 
     #0c5fa5 
    ); 
    background: -webkit-gradient(
     linear, 
     left top, left bottom, 
     from(white), 
     to(#0c5fa5), 
     color-stop(0.03, #72c6e4) 
    ); 
    -moz-border-radius: 0.333em; 
    -webkit-border-radius: 0.333em; 
    -webkit-background-clip: padding-box; 
    border-radius: 0.333em; 
    color: white; 
    -moz-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); 
    -webkit-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); 
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); 
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); 
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); 
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); 
    font-size: 1.167em; 
    padding: 0.286em 1em 0.357em; 
    line-height: 1.429em; 
    cursor: pointer; 
    font-weight: bold; 
    } 
    /* IE class */ 
    .ie button { 
     overflow: visible; 
    } 
    /* IE class */ 
    .ie7 button { 
     padding-top: 0.357em; 
     padding-bottom: 0.214em; 
     line-height: 1.143em; 
    } 
    button img, 
    .big-button img { 
     margin-bottom: -3px; 
    } 
    button:hover, 
    .big-button:hover { 
     border-color: #1eafdC#1193d5 #035592; 
     background: #057fdb url(../images/old-browsers-bg/button-element-hover-bg.png) repeat-x left top; 
     background: -moz-linear-gradient(
      top, 
      white, 
      #2bcef3 4%, 
      #057fdb 
     ); 
     background: -webkit-gradient(
      linear, 
      left top, left bottom, 
      from(white), 
      to(#057fdb), 
      color-stop(0.03, #2bcef3) 
     ); 
    } 
    button:active, 
    .big-button:active { 
     border-color: #5b848b #b2def1 #b2def1 #68a6ba; 
     background: #3dbfed url(../images/old-browsers-bg/button-element-active-bg.png) repeat-x top; 
     background: -moz-linear-gradient(
      top, 
      #89e7f9, 
      #3dbfed 
     ); 
     background: -webkit-gradient(
      linear, 
      left top, left bottom, 
      from(#89e7f9), 
      to(#3dbfed) 
     ); 
     -moz-box-shadow: none; 
     -webkit-box-shadow: none; 
     box-shadow: none; 
    } 

    button.red, 
    .red button, 
    .big-button.red, 
    .red .big-button { 
     color: white; 
     border-color: #bf3636 #5d0000 #0a0000; 
     background: #790000 url(../images/old-browsers-bg/button-element-red-bg.png) repeat-x top; 
     background: -moz-linear-gradient(
      top, 
      white, 
      #ca3535 4%, 
      #790000 
     ); 
     background: -webkit-gradient(
      linear, 
      left top, left bottom, 
      from(white), 
      to(#790000), 
      color-stop(0.03, #ca3535) 
     ); 
     } 
     button.red:hover, 
     .red button:hover, 
     .big-button.red:hover, 
     .red .big-button:hover { 
      border-color: #c24949 #9d3d3d #590909; 
      background: #9d0404 url(../images/old-browsers-bg/button-element-red-hover-bg.png) repeat-x top; 
      background: -moz-linear-gradient(
       top, 
       white, 
       #fe6565 4%, 
       #9d0404 
      ); 
      background: -webkit-gradient(
       linear, 
       left top, left bottom, 
       from(white), 
       to(#9d0404), 
       color-stop(0.03, #fe6565) 
      ); 
     } 
     button.red:active, 
     .red button:active, 
     .big-button.red:active, 
     .red .big-button:active { 
      border-color: #7c5656 #f7cbcb #f7cbcb #a15151; 
      background: #ff5252 url(../images/old-browsers-bg/button-element-red-active-bg.png) repeat-x top; 
      background: -moz-linear-gradient(
       top, 
       #ff9d9d, 
       #ff5252 
      ); 
      background: -webkit-gradient(
       linear, 
       left top, left bottom, 
       from(#ff9d9d), 
       to(#ff5252) 
      ); 
     } 

    button:disabled, 
    button:disabled:hover, 
    .big-button.disabled, 
    .big-button.disabled:hover { 
     color: #bfbfbf; 
     border-color: #e9f2f6 #c4c3c3 #a2a2a2 #e3e2e2; 
     background: #c8c8c8 url(../images/old-browsers-bg/button-element-disabled-bg.png) repeat-x top; 
     background: -moz-linear-gradient(
      top, 
      #f0f2f2, 
      #c8c8c8 
     ); 
     background: -webkit-gradient(
      linear, 
      left top, left bottom, 
      from(#f0f2f2), 
      to(#c8c8c8) 
     ); 
     -moz-text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.75); 
     -webkit-text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.75); 
     text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.75); 
     -moz-box-shadow: none; 
     -webkit-box-shadow: none; 
     box-shadow: none; 
     cursor: auto; 
    } 
    /* IE class */ 
    button.disabled, 
    button.disabled:hover { 
     color: #bfbfbf; 
     border-color: #e9f2f6 #c4c3c3 #a2a2a2 #e3e2e2; 
     background: #c8c8c8 url(../images/old-browsers-bg/button-element-disabled-bg.png) repeat-x top; 
     cursor: auto; 
    } 

    button.grey, 
    .big-button.grey { 
     color: white; 
     border-color: #a1a7ae #909498 #6b7076; 
     background: #9fa7b0 url(../images/old-browsers-bg/button-element-grey-bg.png) repeat-x top; 
     background: -moz-linear-gradient(
      top, 
      white, 
      #c5cbce 5%, 
      #9fa7b0 
     ); 
     background: -webkit-gradient(
      linear, 
      left top, left bottom, 
      from(white), 
      to(#9fa7b0), 
      color-stop(0.05, #c5cbce) 
     ); 
     -moz-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); 
     -webkit-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); 
     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); 
     -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); 
     -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); 
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); 
     } 
     button.grey:hover, 
     .big-button.grey:hover { 
      border-color: #a1a7b0 #939798 #6e7275; 
      background: #b1b5ba url(../images/old-browsers-bg/button-element-grey-hover-bg.png) repeat-x top; 
      background: -moz-linear-gradient(
       top, 
       white, 
       #d6dadc 4%, 
       #b1b5ba 
      ); 
      background: -webkit-gradient(
       linear, 
       left top, left bottom, 
       from(white), 
       to(#b1b5ba), 
       color-stop(0.03, #d6dadc) 
      ); 
     } 
     button.grey:active 
     .big-button.grey:active { 
      border-color: #666666 #ffffff #ffffff #979898; 
      background: #dddddd url(../images/old-browsers-bg/button-element-grey-active-bg.png) repeat-x top; 
      background: -moz-linear-gradient(
       top, 
       #f1f1f1, 
       #dddddd 
      ); 
      background: -webkit-gradient(
       linear, 
       left top, left bottom, 
       from(#f1f1f1), 
       to(#dddddd) 
      ); 
     } 

    button.small, 
    .big-button.small { 
     font-size: 0.833em; 
     padding: 0.2em 0.3em 0.3em 0.2em; 
     vertical-align: 0.2em; 
     } 
     /* IE class */ 
     .ie button.small { 
      padding: 0.5em 0.3em; 
      vertical-align: 0.1em; 
     } 

    .ie7 button + button { 
     margin-left: 0.25em; 
    } 

按鈕：

<asp:Button ID="LoginButton" runat="server" CommandName="Login" 
         Text="Log In" type="button" 
         ValidationGroup="mainLogin" onclick="LoginButton_Click" CSSClass='button'/> 

Answer 1

調查你的CSS下面的線路有問題，對CSS的工作不適合你的ASP的理由後：在的CssClass

按鈕

button, 
.big-button { 

必須使用css這種方式

.button, 
.big-button { 

所以問題是你錯過了期間運營商。 該按鈕之前，

類選擇使用HTML類屬性，並且與一個「」定義的http://www.w3schools.com/css/css_id_class.asp