当前位置: 网站建设 > 网页设计 > 建站经验 >

几个漂亮的Button的CSS代码

时间:2013-03-02 03:55来源:未知 作者:admin 点击:

标签:几个漂亮的Button的CSS代码 后果(8)亮的(3)CSS(655)代码(82)如(8)几个(15)Button(3)如下(8)
代码如下 后果如图 span id=ArticleContent1_ArticleContent1_lblContentstyle .btn { BORDER-RIGHT: #7b9ebd 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7b9ebd 1px solid; PADDING-LEFT: 2px, 写用户喜欢的文章:给想要投稿人员的一点建议 ; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Micros
几个漂亮的Button的CSS代码》文章地址:http://www.tfxk.com/wangyesheji/jianzhanjingyan/030233U32013.htm

代码如下

后果如图

<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,再谈CSS Hack各浏览器兼容问题, 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,再读《CSS权威指南》; 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,内容首页设计的10条经验.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,兼容多浏览器的Div高度自动伸展的效果, EndColorStr=#9DBCEA); BORDER-LEFT: #002D96 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #002D96 1px solid
}
</style>
<body>
<button class=btn> 建站学 Button</button>,兼容IE和FF的CSS HACK写法;<P></p>
<button
class=btn1_mouseout onmouseover="this.className='btn1_mouseover'"
 onmouseout="this.className='btn1_mouseout'"
> 建站学 Button</button>  &nbsp;
<button
class=btn1_mouseout onmouseover="this.className='btn1_mouseover'"
 onmouseout="this.className='btn1_mouseout'" DISABLED
> 建站学Green Button</button>
<P>
<button class=btn2> 建站学  Button</button>
<P>
<button class=btn3_mouseout onmouseover="this.className='btn3_mouseover'"
 onmouseout="this.className='btn3_mouseout'"
 onmousedown=",兼容ie、firefox的图片自动缩放的css跟js代码分享;this.className='btn3_mousedown'"
  onmouseup="this.className='btn3_mouseup'"
> 建站学 Button</button>
<P>
<button class=btn_2k3> 建站学 Button</button>
</body><,具有引导性的移动应用界面设计模式 搜索、排序和筛选;/span>

--> [网站建设之]多少个美丽的Button的CSS代码

Tag:CSS   CSS  


(责任编辑:网站建设)
几个漂亮的Button的CSS代码相关文章
上一篇:写给网站推广新手的经验教训 下一篇:几个简单而且实用的网站设计技巧
回到顶部