几个比较好看的按钮样式

最新推荐文章于 2024-04-30 14:40:32 发布

Teng_s2000

最新推荐文章于 2024-04-30 14:40:32 发布

阅读量4.1k

点赞数

分类专栏： ASP.NET2.0 文章标签： button filter class c html qq

本文链接：https://blog.csdn.net/Teng_s2000/article/details/1563078

版权

ASP.NET2.0 专栏收录该内容

109 篇文章 0 订阅

订阅专栏

几个比较好看的按钮样式，文章来源清清月儿

<html>

<head>

<title>几个比较好看的按钮效果</title>

<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: #7EBF 4F 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7EBF 4F 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#B3D997); BORDER-LEFT: #7EBF 4F 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7EBF 4F 1px solid

}

.btn1_mouseover {

BORDER-RIGHT: #7EBF 4F 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7EBF 4F 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#CAE4B6); BORDER-LEFT: #7EBF 4F 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7EBF 4F 1px solid

}

.btn2 {padding: 2 4 0 4;font-size:12px;height:23;background-color:#ece9d8;border-width:1;}

.btn3_mouseout {

BORDER-RIGHT: # 2C 59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: # 2C 59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: # 2C 59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: # 2C 59AA 1px solid

}

.btn3_mouseover {

BORDER-RIGHT: # 2C 59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: # 2C 59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#D7E7FA); BORDER-LEFT: # 2C 59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: # 2C 59AA 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 {

}

.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>

</head>

<body>

好看的CSDN Button</button><p>

</p>

好看的Green Button</button>

<button class="btn1_mouseout" onmouseover="this.className='btn1_mouseover'" onmouseout="this.className='btn1_mouseout'"

disabled>

好看的Green Button</button>

<p>

好看的e商Button</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'">

好看的QQ Button</button>

<p>

好看的2k3 Button</button>

</body>

</html>

图片效果：

Teng_s2000

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
几个比较好看的按钮样式

几个比较好看的按钮样式，文章来源清清月儿html>head> title>几个比较好看的按钮效果title> style> .btn { BORDER-RIGHT: #7b9ebd 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7b9ebd 1px solid; PADDING-LEFT:
复制链接

扫一扫