几个好看的button样式

野性酷女 2021-09-10 10:04 613阅读 0赞

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

<button class=btn title="中国站长资讯网"> 中国站长资讯网</button><P></p>  
<button  
class=btn1\_mouseout οnmοuseοver="this.className='btn1\_mouseover'"  
 οnmοuseοut="this.className='btn1\_mouseout'"  
 title="中国站长资讯网:http://www.cndw.com"  
> 中国站长资讯网</button>  &nbsp;  
<button  
class=btn1\_mouseout οnmοuseοver="this.className='btn1\_mouseover'"  
 οnmοuseοut="this.className='btn1\_mouseout'" DISABLED  
> 中国站长资讯网</button>  
<P>  
<button class=btn2 title="中国站长资讯网"> 中国站长资讯网</button>  
<P>  
<button class=btn3\_mouseout οnmοuseοver="this.className='btn3\_mouseover'"  
 οnmοuseοut="this.className='btn3\_mouseout'"  
 οnmοusedοwn="this.className='btn3\_mousedown'"  
  οnmοuseup="this.className='btn3\_mouseup'"  
  title="中国站长资讯网:http://www.cndw.com"  
> 中国站长资讯网</button>  
<P>  
<button class=btn\_2k3 title="中国站长资讯网:http://www.cndw.com"> 中国站长资讯网</button>

发表评论取消回复

表情：

评论列表（有 0 条评论，613人围观）

还没有评论，来说两句吧...

相关阅读

相关好看的表格样式

效果图 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F

傷城~/ 2022年12月30日 08:26/ 0 赞/ 245 阅读

相关 Android-Button颜色样式

Button添加属性android:background="@drawable/button\_style" drawable/button\_style.xml内代码

不念不忘少年蓝@/ 2022年12月27日 11:19/ 0 赞/ 203 阅读

相关 button样式

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

刺骨的言语ヽ痛彻心扉/ 2022年12月03日 12:55/ 0 赞/ 180 阅读

相关 Gridview中几个Button的应用

gridview中有三种方式添加button的应用，CommandField、ButtonField、TemplateField中加Button这三种方式。三种方

你的名字/ 2022年09月19日 00:28/ 0 赞/ 221 阅读

相关 android Button 样式

我们在开发的过程中很多时候要用到一些触发事件改变一个控件的背景颜色或样式。接下来就是自定义的一些触发事件的样式效果都是通用的，希望对大家有所帮助。记住是放在res>

梦里梦外;/ 2022年08月27日 01:26/ 0 赞/ 266 阅读

相关好看的table css样式

原文出处：[https://blog.csdn.net/hello\_mr\_anan/article/details/70257627?locationNum=3&fps=1

我会带着你远行/ 2022年05月15日 08:10/ 0 赞/ 962 阅读

相关好看html表格table样式

<style type="text/css"> table{ border-collapse:collapse; tabl

悠悠/ 2021年11月09日 23:34/ 0 赞/ 3441 阅读

相关好看的滚动条样式

<style type="text/css"> .testDiv::-webkit-scrollbar {

电玩女神/ 2021年09月30日 14:42/ 0 赞/ 469 阅读

相关修改el-button的样式

HTML代码： <el-button type="primary" >登录</el-button> css代码： <style scoped> .el-b

悠悠/ 2021年09月30日 02:48/ 0 赞/ 1030 阅读

相关几个好看的button样式

<style> .btn \{ BORDER-RIGHT: \7b9ebd 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: \7

野性酷女/ 2021年09月10日 10:04/ 0 赞/ 614 阅读