<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>个比较好看的Button的CSS-chinaz.com</title>
</head>
<body>
<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 title="CSS样式按钮\">CSS样式按钮</button><P></p>
<button
class=btn1_mouseout ōnmouseover="this.className='btn1_mouseover'"
onmouseout="this.className='btn1_mouseout'"
title="CSS样式按钮">CSS样式按钮</button>
<button
class=btn1_mouseout ōnmouseover="this.className='btn1_mouseover'"
onmouseout="this.className='btn1_mouseout'" DISABLED>CSS样式按钮</button>
<P>
<button class=btn2 title="CSS样式按钮">CSS样式按钮</button>
<P>
<button class=btn3_mouseout ōnmouseover="this.className='btn3_mouseover'"
onmouseout="this.className='btn3_mouseout'"
onmousedown="this.className='btn3_mousedown'"
ōnmouseup="this.className='btn3_mouseup'"
title="CSS样式按钮">CSS样式按钮</button>
<P>
<button class=btn_2k3 title="CSS样式按钮">CSS样式按钮</button></body>
</html>
分享到:
相关推荐
好看的CSS按钮(兼容IE6)好看的CSS按钮(兼容IE6)
超好看的按钮 css实际的 方便修改超好看的按钮 css实际的 方便修改超好看的按钮 css实际的 方便修改超好看的按钮 css实际的 方便修改超好看的按钮 css实际的 方便修改超好看的按钮 css实际的 方便修改超好看的按钮 ...
10个好看的css按钮源码
50个漂亮的用css修饰的按钮 50个漂亮的用css修饰的按钮 50个漂亮的用css修饰的按钮
纯CSS3按钮3D效果,在鼠标点击按钮时,按钮会有下凹的视觉效果,非常好看。
一个好看的CSS按钮样式
CSS实现的几个非常好看的按钮! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
12个超赞的CSS按钮,绝对的震撼,送给那些追求完美和品质的朋友们。 准备好了吗^
很立体的CSS按钮菜单效果
漂亮的CSS按钮样式单,只需要通过简单的CSS样式单,就可以实现各种样式的按钮,使用简单、方便。
纯css3 gradient属性制作6种渐变色的按钮样式
CSS3各种漂亮按钮 绝对好看实用
近100款漂亮CSS3/HTML5按钮合集,圆角,水晶按钮,红色的,黑色的,黄色的,各种颜色的,另外还都是圆角的按钮,用CSS3纯代码制作的菜单,无使用任何修饰性图片,想当八错。
圆角按钮宽度自适应 自适应宽度的CSS圆角背景的按钮
3款外观风格清新漂亮的CSS3开关按钮样式,基于CSS3的自定义Checkbox开关美化效果,有3D效果和扁平化风格。
之前我分享过一些时尚的CSS3动画按钮,比如CSS3渲染Checkbox实现3D开关切换按钮、纯CSS3 3D按钮 按钮酷似牛奶般剔透等等。今天就再来分享一款可爱的CSS3按钮组合,该CSS3按钮一共有5种不同的风格,有几款还有3D立体...
简单好看的CSS3按钮点击气泡动画特效,鼠标点击按钮出现气泡散开动画效果。
现在图片按钮已经比较落后少用了,分享给大家5种好看的CSS3悬停按钮动画特效,主要是CSS3按钮边框动画效果。
之前我介绍过几款漂亮的CSS3开关切换按钮,比如这款CSS3渲染Checkbox实现3D开关切换按钮就利用了CSS3和checkbox实现了开关切换按钮。今天介绍的这款HTML5/CSS3开关切换按钮是利用纯CSS3的,代码非常简单,3D效果也还...
好看的button样式CSS,你值得下载,