css style(input type="button")

原创 2005年05月25日 16:48:00

收藏的几个漂亮的button
<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>

除了CSDN的和e商2003的,其他皆为本人的原创按钮
转摘请注明出处 http://blog.csdn.net/juwuyi
<button class=btn title="这是CSDN的官方按钮"> 好看的CSDN Button</button><P></p>
<button
class=btn1_mouseout onmouseover="this.className='btn1_mouseover'"
 onmouseout="this.className='btn1_mouseout'"
 title="这是JoeCom(juwuyi)的原创按钮 Joecom'sblog:http://blog.csdn.net/juwuyi"
> 好看的Green 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 title="这是e商2003的官方按钮"> 好看的 e商2003 Button</button>
<P>
<button class=btn3_mouseout onmouseover="this.className='btn3_mouseover'"
 onmouseout="this.className='btn3_mouseout'"
 onmousedown="this.className='btn3_mousedown'"
  onmouseup="this.className='btn3_mouseup'"
  title="这是JoeCom(juwuyi)的原创按钮 Joecom'sblog:http://blog.csdn.net/juwuyi"
> 好看的QQ Button</button>
<P>

根据input的type来控制css样式

/*根据input的type来控制css样式*//*1.用css的expression判断表达式优点:简单,轻量级缺点:expression判断表达式FireFox是不支持的。致命的是只能区分出一个(...
  • ldl22847
  • ldl22847
  • 2009年12月16日 09:00
  • 15990

CSS 美化 input button 按钮

input、button可以通过CSS自定义外观,而checkbox radio则没办法通过CSS自定义样式。今天逛GOOGLE+的时候发现了一个利用CSS3伪元素:after来自定义checkbox...

网站开发进阶(四十四)input type="submit" 和"button"的区别

网站开发进阶(四十四)input type=”submit” 和”button”的区别  在一个页面上画一个按钮,有四种办法: 这就是一个按钮。如果你不写javascript 的话,按下去什么也不会...

HTML+CSS优化“文件选择”控件(<input type="file">)

碰到个页面的美化问题,效果图如下: 而html默认的空间是难看的,就像下面这个CSDN编辑博客的苦逼控件一样: 那么就需要我们来解决,我的方法是使用text与button代替这个控件,...

设置input type=range滑块的CSS样式

range是HTML5里的input标签的新属性,type=”range”可以让input标签显示成一个滑块的样子 最新的浏览器基本都提供了支持,包括IE10,但是很遗憾的是,火狐仍然不支持,至...

Html+CSS input type=file 文件类型限制属性 accept (HTML 5)

网页上添加一个input file HTML控件: 1 input id="File1" type="file" />   默认是这样的,所有文件类型都会显...

css input[type=file] 样式美化 (radio checkbox类似)

在做input文本上传时,由于html原生的上传按钮比较丑,需要对其进行美化主要想到以下几种方法,欢迎大家补充1. 通过position和opacity实现 input的透明度设置为0,设置为绝对定位...

CSS定义input的type类型样式

input { width:expression(this.type=="text"?"200px":"style"); }     input[type="text"] { wid...

input的type属性所有参数(含css3.0)

input的type属性所有参数(含css3.0) 这是我的第一篇博文,不知道要来写什么,刚好最近看了下css3中input的type属性,发现有很多简单实用的东西,于是就决定写这篇博文。(仅供参...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css style(input type="button")
举报原因:
原因补充:

(最多只允许输入30个字)