几个好看的button样式

野性酷女 2021-09-10 10:04 572阅读 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 条评论，572人围观）

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

相关阅读

相关好看的表格样式

效果图 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F

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

相关 Android-Button颜色样式

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

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

相关 Gridview中几个Button的应用

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

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

相关 android Button 样式

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

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

相关炫酷Button样式

平时我们所用的Button样式过于单一，不怎么好看，帮助基础的同学们学会使用Style改变Button样式，我简单的写一点东西 <span style="font-s

你的名字/ 2022年07月16日 05:22/ 0 赞/ 228 阅读

相关好看的table css样式

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

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

相关好看html表格table样式

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

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

相关好看的滚动条样式

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

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

相关修改el-button的样式

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

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

相关几个好看的button样式

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

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