用CSS做的几个漂亮的Button

css

<span id="ArticleContent1_ArticleContent1_lblContent"><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>
<body>
<button class=btn> 好看的WEBJX Button</button><P></p>
<button
class=btn1_mouseout
 
> 好看的Green Button</button>   
<button
class=btn1_mouseout
  DISABLED
> 好看的Green Button</button>
<P>
<button class=btn2> 好看的 webjx Button</button>
<P>
<button class=btn3_mouseout
 
 
 
> 好看的Sina Button</button>
<P>
<button class=btn_2k3> 好看的 sohu Button</button>
</body></span>

<span id="ArticleContent1_ArticleContent1_lblContent"><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><body><button class=btn> 好看的WEBJX Button</button><P></p><button class=btn1_mouseout > 好看的Green Button</button>   <button class=btn1_mouseout DISABLED> 好看的Green Button</button><P><button class=btn2> 好看的 webjx Button</button><P><button class=btn3_mouseout > 好看的Sina Button</button><P><button class=btn_2k3> 好看的 sohu Button</button> </body></span>

    [Ctrl+A 全部选择]

时间： 2024-08-03 16:12:52

用CSS做的几个漂亮的Button的相关文章

div+css做html的布局，请问div和span有什么区别？span不能做布局么？table呢

问题描述 div+css做html的布局,请问div和span有什么区别?span不能做布局么?table呢 div+css做html的布局,请问div和span有什么区别?span不能做布局么?table呢 解决方案 div元素做出来的效果是盒子模型:span元素是用来凸显某些关键字的,做不了布局:table元素可以拿来布局,但是不推荐,因为在网页加载的时候很慢,必须全部加载好了才显示出来. 解决方案二: html分块级元素 ,行内元素,行块元素. 块级元素是可以有宽和高的,默认占一行,最先的

网页网页，跪求大神。HTML加CSS做的网页二级界面，跪求大神帮忙。

问题描述 网页网页,跪求大神.HTML加CSS做的网页二级界面,跪求大神帮忙. HTML加CSS做的网页二级界面,跪求大神帮忙.HTML加CSS做的网页二级界面,跪求大神帮忙. 解决方案 问的什么问题 啊?具体你那里出现问题.

CSS定义网页布局漂亮的Button按钮代码

css定义网页布局漂亮的button按钮代码 <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ht

div+css做企业网站系列教程之一

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 跟天豪学div+css做企业网站系列之一 现在做网站流行用什么写网页代码?用table做网站已经不流行了,现在流行用什么做网站吗?接下来, 跟天豪学div+css做企业网站,你可以学到div+css为什么会那么流行用来做网站. 我们先从简单的企业网站讲起,用div+css来写网页代码. 所有网站第一步:构思 不管你是用word还是用ps,或者

CSS做气泡效果的三角

经常用到这个做气泡效果的三角CSS样式 [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

用CSS做圆角的一个例子

css|圆角 HTML代码<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="//www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Ty

用CSS做表单的一个例子

css  如下: HTML代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional

求用div+css做个编写这段代码

问题描述 这段代码是在ASP.NET里写的,用ASP.NET做网站.各位帮忙啊,我不会.<tablestyle="BORDER-RIGHT:#cccccc1ptsolid;BORDER-TOP:#cccccc1ptsolid;BORDER-LEFT:#cccccc1ptsolid;BORDER-BOTTOM:#cccccc1ptsolid"height="623"cellSpacing="0"cellPadding="0"

只用CSS做的下拉式菜单--A Drop-Down Menu With Only CSS

最近在网上发现了一个只用CSS实现的下拉式菜单(Drop-Down Menu),感觉很新鲜也很酷.于是仔细看了作者的介绍以及源代码,发现核心就是一个":hover"伪类的使用.在CSS1中此伪类仅可用于a对象.且 对于无href属性(特性)的a对象,此伪类不发生作用.在CSS2中此伪类可以应用于任何对象.但IE6及其以下版本都不能很好的支持CSS2,因此 IE6及其以下版本就不能很好的运行这个程序了.所幸Firefox,Netscape,Opera,Safari等浏览器的最新版本均能很