css製作漂亮樣式按鈕

來源:互聯網
上載者:User

 代碼如下 複製代碼

css製作漂亮樣式按鈕

.buttoncss {
background: #E8F4FF url(../Images/bluebuttonbg.gif);
border: 1px #003399 solid;
border-bottom: #93BEE2 1px solid;
border-left: #93BEE2 1px solid;
border-right: #93BEE2 1px solid;
border-top: #93BEE2 1px solid;
color: #003399;
color: 006699;
cursor: hand;
font: normal 9pt "Tahoma", "宋體";
height: 22px;
width: 60px;
}

/**//*藍色按鈕樣式*/
.bluebuttoncss {
background: #FFFFFF url(../Images/blue_button_bg.gif);
border: 0px #93BEE2 solid; /**/
color: #003366;
cursor: hand;
font: normal 9pt "Tahoma", "宋體";
}

/**//*紅色按鈕樣式*/
.redbuttoncss {
background: #FFFFFF url(../Images/redbuttonbg.gif);
border: 1px #93BEE2 solid;
border-bottom: #93BEE2 1px solid;
border-left: #93BEE2 1px solid;
border-right: #93BEE2 1px solid;
border-top: #93BEE2 1px solid;
color: #0066CC;
cursor: hand;
font: normal 9pt "Tahoma", "宋體";
}

/**//*選擇按鈕樣式*/
.selectbuttoncss {
background: #FFFFFF url(../Images/blue_button_bg.gif);
border: 1px #93BEE2 solid;
border-bottom: #93BEE2 1px solid;
border-left: #93BEE2 1px solid;
border-right: #93BEE2 1px solid;
border-top: #93BEE2 1px solid;
color: #0066CC;
cursor: hand;
font: normal 9pt "Tahoma", "宋體";
}

/**//*綠色按鈕樣式*/
.greenbuttoncss {
background: #FFFFFF url(../Images/greenbuttonbg.gif);
border: 1px #93BEE2 solid;
border-bottom: #93BEE2 1px solid;
border-left: #93BEE2 1px solid;
border-right: #93BEE2 1px solid;
border-top: #93BEE2 1px solid;
color: #0066CC;
cursor: hand;
font: normal 9pt "Tahoma", "宋體";
}

/**//*映像按鈕*/
.imagebutton {
cursor: hand; /**/
}

/**//*頁面內文樣式*/
body {
color: #003366;
font-size: 9pt;
overflow: auto;
scrollbar-3dlight-color: #EDEDF3;
scrollbar-arrow-color: #082468;
scrollbar-darkshadow-color: #EDEDF3;
scrollba*-**ce-color: #EDEDF3;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #93949F;
scrollbar-track-color: #F7F7F9;
}

/**//*************************************
下拉選擇框顯示風格
*************************************/
select {
background: #F4F4F4;
border-bottom: #000000 1px solid;
border-left: #FFFFFF 1px solid;
border-right: #000000 1px solid;
border-top: #FFFFFF 1px solid;
color: #003366;
font-size: 12px;
}

/**//*****************************************************
超級連結顯示風格
*****************************************************/
a:link, a:visited{
color: #223355;
text-decoration: none;
}

a.highlight:hover {
color: #FF0000;
text-decoration: underline;
}

a.thisclass:link, a.thisclass:visited {
color: #D9EBFD;
font-weight: bold;
text-decoration: none;
}

a.thisclass:hover {
color: #FFFFFF;
font-weight: bold;
}

a.navlink:link, a.navlink:visited {
color: #D9EBFD;
text-decoration: none;
}

/**//*****************************************************
線條文本編輯框顯示風格
*****************************************************/
.editbox {
background: #FFFFFF;
border: 1px solid #B7B7B7;
color: #003366;
cursor: text;
font: 9pt "Arial";
height: 18px;
padding: 1px;
}

/**//****************************************************
多行文字框樣式
*****************************************************/
.multieditbox {
background: #F8F8F8;
border-bottom: #B7B7B7 1px solid;
border-left: #B7B7B7 1px solid;
border-right: #B7B7B7 1px solid;
border-top: #B7B7B7 1px solid;
color: #000000;
cursor: text;
font: 9pt "Arial";
padding: 1px;
}

/**//*****************************************************
陰影風格的表單
*****************************************************/
.shadow {
background: #808080;
background: #FFCC00;
filter: progid:DXImageTransform.Microsoft.DropShadow(color=#FF404040,offX=2,offY=2,positives=true);
left: 0px;
position: absolute;
top: 0px;
z-index: 1000;
}

/**//*****************************************************
只顯一條橫線的Text的樣式!
*****************************************************/
.logintxt {
background: #FFFFFF;
border-bottom: #C0C0C0 1px solid;
border-left: #FFFFFF 0px solid;
border-right: #FFFFFF 0px solid;
border-top: #FFFFFF 0px solid;
font-size: 9pt;
}

/**//*****************************************************
DataGrid頁首樣式
*****************************************************/
.dgtitle {
background: url(../images/tableTitle2.gif);
color: #FFFFFF;
font-size: large;
height: 25px;
height: 25px;
text-align: center;
vertical-align: middle;
}

/**//*****************************************************
DataGrid資料顯示樣式
*****************************************************/
.dgitem {
height: 15px;
text-align: center;
vertical-align: middle;
}

/**//*****************************************************
文字框顯示樣式
*****************************************************/
.clarity {
border-bottom: #FFFFFF 0px solid;
border-left: #FFFFFF 0px solid;
border-right: #FFFFFF 0px solid;
border-top: #FFFFFF 0px solid;
font-size: 9pt;
}

table.list {
border-bottom: 1px solid #000000;
border-top: 1px solid #000000;
}

table.list th,table.list td {
background: #EEEEEE;
border-bottom: 2px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
color: #000000;
padding: 4px;
}

table.list th {
background: #0064A8;
border-top: 2px solid #FFFFFF;
color: #FFFFFF;
font-weight: normal;
}

table.form th,table.form td {
background: #F6F6F6;
border-bottom: 1px solid #F6F6F6;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
color: #000000;
padding: 4px;
}

table.form th {
background: #E8E8E8;
border-bottom: 1px;
border-top: 1px solid #FFFFFF;
color: #006699;
font-size: 12px;
font-weight: normal;
}

table.sample td {
background: #F6F6F6;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-top: 1px solid #000000;
color: #000000;
padding: 2px;
}

table.sample th {
background: #AEC1D7;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-top: 1px solid #000000;
color: #000000;
font-weight: normal;
}

table.sampled td {
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-top: 1px solid #000000;
color: #000000;
padding: 2px;
}

table.sampled th {
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-top: 1px solid #000000;
color: #000000;
font-weight: normal;
}

table.form1 th,table.form1 td {
background: #BED8F3;
border-bottom: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
color: #000000;
padding: 4px;
}

/**//*****************************************************
沒有邊框的輸入框
*****************************************************/
.noneinput {
background: #F6F6F6;
border-bottom-style: none;
border-left-style: none;
border-right-style: none;
border-top-style: none;
height: 99%;
text-align: center;
width: 99%;
}

/**//*****************************************************
扁平風格的表單樣式
*****************************************************/
/**//*****************************************************/
table {
border-collapse: collapse;
}

/**//*
進度條樣式
*/
.bi-loading-status {
background: #808080;
overflow: hidden;
padding: 1px;
width: 150px; /*position: absolute;*/
}


.bi-loading-status .text {
overflow: hidden;
padding: 1px;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}


.bi-loading-status .progress-bar {
background: window;
border: 1px solid ThreeDShadow;
height: 10px;
overflow: hidden;
padding: 1px;
width: 100%;
}


.bi-loading-status .progress-bar div {
background: Highlight;
filter: Alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=0);
height: 100%;
overflow: hidden;
}

/**//*****************************************************
表頭背景
*****************************************************/
.tabletop {
background: url(../images/tableTitle2.gif);
height: 25px;
}

/**//*****************************************************
大標題
*****************************************************/
.tabletitle{
color: #0066CC;
filter: progid:DXImageTransform.Microsoft.DropShadow(color=#CCFFFF,offX=1,offY=1,positives=true);
font: bolder 12pt "Arial";
}

/**//*****************************************************
小標題
*****************************************************/
.smalltitle{
background: #E8E8E8;
color: #006699;
font-size: 12px;
font-weight: normal;
}

.calendarborder{
border: 1px #B7B7B7 solid;
}

td, th {
font-size: 12px;
}

a:hover, a.highlight:link, a.highlight:visited {
color: #FF0000;
text-decoration: none;
}

table.list th a:hover, table.form th a:hover {
color: #FFFFFF;
text-decoration: underline;
}

table.list th a:visited, table.form th a:link, table.form th a:visited, a.navlink:hover, table.list th a:link {
color: #FFFFFF;
text-decoration: none;
}

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.