css制作漂亮样式按钮

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;
}