谁有漂亮的CSS按钮给小弟一个

解决方案 »

  1.   

    从网上找的<style>
    .btn {
    BORDER-RIGHT: #7b9ebd 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7b9ebd 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#cecfde); BORDER-LEFT: #7b9ebd 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7b9ebd 1px solid
    }
    .btn1_mouseout {
    BORDER-RIGHT: #7EBF4F 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7EBF4F 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#B3D997); BORDER-LEFT: #7EBF4F 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7EBF4F 1px solid
    }
    .btn1_mouseover {
    BORDER-RIGHT: #7EBF4F 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7EBF4F 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#CAE4B6); BORDER-LEFT: #7EBF4F 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7EBF4F 1px solid
    }
    .btn2 {padding: 2 4 0 4;font-size:12px;height:23;background-color:#ece9d8;border-width:1;}
    .btn3_mouseout {
    BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid
    }
    .btn3_mouseover {
    BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#D7E7FA); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid
    }
    .btn3_mousedown
    {
    BORDER-RIGHT: #FFE400 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #FFE400 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #FFE400 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #FFE400 1px solid
    }
    .btn3_mouseup {
    BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid
    }
    .btn_2k3 {
    BORDER-RIGHT: #002D96 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #002D96 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#FFFFFF, EndColorStr=#9DBCEA); BORDER-LEFT: #002D96 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #002D96 1px solid
    }
    </style>
    <body><button class=btn title="CSS样式按钮">CSS样式按钮</button><P></p>
    <button
    class=btn1_mouseout onmouseover="this.className='btn1_mouseover'"
    onmouseout="this.className='btn1_mouseout'"
    title="CSS样式按钮">CSS样式按钮</button>   
    <button
    class=btn1_mouseout onmouseover="this.className='btn1_mouseover'"
    onmouseout="this.className='btn1_mouseout'" DISABLED>CSS样式按钮</button>
    <P>
    <button class=btn2 title="CSS样式按钮">CSS样式按钮</button>
    <P>
    <button class=btn3_mouseout onmouseover="this.className='btn3_mouseover'"
    onmouseout="this.className='btn3_mouseout'"
    onmousedown="this.className='btn3_mousedown'"
      onmouseup="this.className='btn3_mouseup'"
      title="CSS样式按钮">CSS样式按钮</button>
    <P>
    <button class=btn_2k3 title="CSS样式按钮">CSS样式按钮</button></body>
      

  2.   

    一样能用,把服务器控件的cssclass="你的样式"
      

  3.   


    /*按钮样式*/
    .ButtonCss {}{
        font-family: "Tahoma", "宋体";
        font-size:9pt; color: #003399;
        border: 1px #003399 solid;
        color:006699;
        BORDER-BOTTOM: #93bee2 1px solid; 
        BORDER-LEFT: #93bee2 1px solid; 
        BORDER-RIGHT: #93bee2 1px solid; 
        BORDER-TOP: #93bee2 1px solid;
        background-image:url(../Images/bluebuttonbg.gif);
        background-color: #e8f4ff;
        CURSOR: hand;
        font-style: normal ;
        width:60px;
        height:22px;
    }/**//*蓝色按钮样式*/
    .blueButtonCss {}{
        font-family: "Tahoma", "宋体";
        font-size: 9pt; color: #003366;
        border: 0px #93bee2 solid;
       /**//* BORDER-BOTTOM: #93bee2 1px solid; 
        BORDER-LEFT: #93bee2 1px solid; 
        BORDER-RIGHT: #93bee2 1px solid; 
        BORDER-TOP: #93bee2 1px solid;*/
        background-image:url(../Images/blue_button_bg.gif);
        background-color: #ffffff;
        CURSOR: hand;
        font-style: normal ;
    }/**//*红色按钮样式*/
    .redButtonCss {}{
        font-family: "Tahoma", "宋体";
        font-size: 9pt; color: #0066cc;
        border: 1px #93bee2 solid;
        BORDER-BOTTOM: #93bee2 1px solid; 
        BORDER-LEFT: #93bee2 1px solid; 
        BORDER-RIGHT: #93bee2 1px solid; 
        BORDER-TOP: #93bee2 1px solid;
        background-image:url(../Images/redbuttonbg.gif);
        background-color: #ffffff;
        CURSOR: hand;
        font-style: normal ;
    }
    /**//*选择按钮样式*/
    .selectButtonCss
    {}{
        font-family: "Tahoma", "宋体";
        font-size: 9pt; color: #0066cc;
        border: 1px #93bee2 solid;
        BORDER-BOTTOM: #93bee2 1px solid; 
        BORDER-LEFT: #93bee2 1px solid; 
        BORDER-RIGHT: #93bee2 1px solid; 
        BORDER-TOP: #93bee2 1px solid;
        background-image:url(../Images/blue_button_bg.gif);
        background-color: #ffffff;
        CURSOR: hand;
        font-style: normal ;
    }    /**//*绿色按钮样式*/
    .greenButtonCss {}{
        font-family: "Tahoma", "宋体";
        font-size: 9pt; color: #0066cc;
        border: 1px #93bee2 solid;
        BORDER-BOTTOM: #93bee2 1px solid; 
        BORDER-LEFT: #93bee2 1px solid; 
        BORDER-RIGHT: #93bee2 1px solid; 
        BORDER-TOP: #93bee2 1px solid;
        background-image:url(../Images/greenbuttonbg.gif);
        background-color: #ffffff;
        CURSOR: hand;
        font-style: normal ;
    }
      

  4.   

    楼上 控件里的CSSCLASS属性怎么写?
      

  5.   

    cssclass相当于html元素的class
    对应于引用css中的   .xxxx   先学学CSS吧,很快就能基本会用。