css style(input type="button")

最新推荐文章于 2016-06-29 23:43:32 发布
原创 最新推荐文章于 2016-06-29 23:43:32 发布 · 6.8k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#button #input #css #filter #class #c

博客分享了几个漂亮的button样式代码，包含不同风格的按钮，如优快云官方按钮、原创绿色按钮、e商2003官方按钮、类似QQ的按钮等，还给出了鼠标悬停、按下等状态的样式设置，部分为博主原创。

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

除了优快云的和e商2003的，其他皆为本人的原创按钮
转摘请注明出处 http://blog.youkuaiyun.com/juwuyi
<button class=btn title="这是优快云的官方按钮"> 好看的优快云 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.youkuaiyun.com/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.youkuaiyun.com/juwuyi"
> 好看的QQ Button</button>
<P>

自定义input type=file 样式 美化input type=file 改变input type=file控件“丑陋面貌”
哪一站
12-24 5643
自定义input type=file 样式，美化input type=file 改变input type=file控件“丑陋面貌”
要创建一个HTML5的file输入元素并定制其样式，你可以使用`＜input type=“file“＞`标签
BLOG域名:programb.blog.youkuaiyun.com
06-26 981
选择器在元素获得了焦点并且其任何子元素也获得了焦点时被触发。这意味着它不仅关注当前元素是否处于焦点状态，还检查其内部是否有其他部分也获得焦点，这使得它适用于那些希望在内容区域任何地方被聚焦时呈现特定样式的元素，如可折叠菜单或滚动区域内的某个部分。这段代码设置了file输入框的基本外观，当用户选择文件时，背景色会变为灰色，并在鼠标悬停时改变为红色。选择器应用于元素在其生命周期内被激活（通常通过用户的点击或按下）的那一刻，但并不总是保持该状态，例如按钮在被按下并释放时会失去这个状态。标签，配合CSS来实现。
几个漂亮的Button的CSS
erphome8的专栏
05-07 1942
.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, StartC
好看的button样式
01-03
分享50个CSS超炫丽button样式代码下载分享50个CSS超炫丽button样式代码下载
超漂亮的CSS 按钮 button
10-05
超漂亮的CSS 按钮 button
50多个超漂亮水晶Button按钮样式大集合
07-22
50多个超级漂亮的Button按钮样式，大部分都是大家喜欢的水晶样式，水凌凌的，讨人喜欢，而且都配合了CSS实现了鼠标悬停变色，这些按钮在我们日常从事WEB前端设计时候都能用得上，或许你现在用不上，但下载收藏起来，日后用起来方便多了。
被遗忘掉的button标签——重新翻译《重新认识button标签》
疯子风的个人空间
05-27 1015
http://www.dudo.org/article.asp?id=192注：这篇文章已经有人翻译过重新认识button 标签，但是感觉其中有很多地方值得推敲，不太好理解。因此本人结合个人学习体会重新翻译而成此文。英文原文：http://particletree.com/features/rediscovering-the-button-element/中文原文：[url]http://ww
漂亮button
weixin_34378045的博客
12-22 127
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt;&lt;HTML&gt;&lt;HEAD&gt;&lt;TITLE&gt; New Document &lt;/TITLE&gt;&lt;META NAME="Generator" CONTENT="EditPlus"&
如何将input type=file显示的浏览变成英文的
06-26
1. **隐藏原生的 `<input type="file">` 元素：** 使用CSS将原生的文件输入框隐藏起来。 ```html <input type="file" name="picpath" id="picpath" style="display:none" onChange="document.formen.path.value=...
JS表单提交验证、input（type=number） 去三角 刷新验证码
10-19
本篇文章将探讨如何使用JavaScript进行表单提交验证，特别是针对`<input type="number">`字段以及如何去掉数字输入框的上下箭头，并介绍如何实现验证码的刷新功能。 首先，当需要对表单进行验证时，可以监听表单的`...
36种漂亮的网页Button按钮样式
06-09
36种漂亮的网页Button按钮样式
36种漂亮的CSS3网页按钮Button样式
03-18
内含36种 button的界面效果，纯css3制作，需要的拿去，分享是第一美德！
各种各样的好看的按钮图标1000个网页图标打包下载
11-01
各种各样的好看的按钮图标,1000个网页图标打包下载
实现input type=file浏览按钮英文显示的解决方案
<input type="file" id="file-upload-input" style="display: none;"> ``` ```javascript document.getElementById('file-upload-button').addEventListener('click', function() { document.getElementById('...
[转] 按钮样式
anole2012的博客
06-19 406
CSS3 按钮   &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;hea...
CSS按钮样式之button标签与input type=button的区别详解
Crosoe的笔记——菜鸟，求指导！
06-29 1945
转载文章，原文地址：http://ipmtea.net/css/201006/16_5.html Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities
几个漂亮的 button 样式
weixin_30679823的博客
06-22 244
<style> .btn { BORDER-RIGHT: #7b9ebd 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7b9ebd 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImag...
用CSS做的几个漂亮的Button
米灰色的天空～～
08-29 1006
好看的WEBJX Button好看的Green Button  好看的Green Button 好看的 webjx Button 好看的Sina Button 好看的 sohu Button
css 去除input type=file框外的文字
最新发布
10-25
虽然无法直接使用 CSS 单独去除 `<input type="file">` 框外的文字，但可以通过隐藏整个 `<input type="file">` 元素，然后用其他自定义元素来替代其功能，从而达到“去除”框外文字的视觉效果。 可以将 `<input type="file">` 元素的 `display` 属性设置为 `none` 来隐藏它，接着创建一个自定义按钮，利用 JavaScript 监听该按钮的点击事件，当点击自定义按钮时，触发隐藏的 `<input type="file">` 元素的点击事件，代码示例如下： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>input type="file"</title> <style> /* 隐藏 input type=file 元素 */ input[type='file'] { display: none; } /* 自定义按钮样式 */ input[type='button'] { padding: 10px 20px; background-color: #007BFF; color: white; border: none; cursor: pointer; } </style> </head> <body> <!-- 自定义按钮 --> <input type="button" value="选择文件" /> <!-- 隐藏的 input type=file 元素 --> <input type="file" accept="image/*" /> <script type="text/javascript"> window.onload = (event) => { main(); } function main() { const inputButton = document.querySelector("input[type='button']") const inputFile = document.querySelector("input[type='file']") inputButton.onclick = (event) => { inputFile.click(); } inputFile.onchange = (event) => { const files = event.target.files; console.log(files); } } </script> </body> </html> ``` 在上述代码中，通过 CSS 将 `<input type="file">` 元素隐藏，创建了一个自定义按钮，利用 JavaScript 实现了点击自定义按钮时触发文件选择框的功能。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值