php漂亮按钮代码,分享一款金属感十足的按钮样式代码
在项目中,几乎所有的网站都会用到按钮,多则十几个,少则几个。一个实用又好看的按钮,能给页面增色不少,从而更能吸引用户的眼球。在浏览网站的时候,看到一些好看的,炫酷的按钮,拿过来和大家分享分享,下次如果需要使用的时候,直接复制就可以。
HTML部分:
PUSH
CSS部分:body {background: #ddd;}
#button {
width: 100px;
height: 100px;
border-bottom: 2px solid #eee;
background-image: -webkit-linear-gradient(top, #999, #d0d0d0 80% );
background-image: -moz-linear-gradient(top, #999, #d0d0d0 80% );
background-image: -ms-linear-gradient(top, #999, #d0d0d0 80% );
background-image: -o-linear-gradient(top, #999, #d0d0d0 80% );
background-image: linear-gradient(top, #999, #d0d0d0 80% );
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
box-shadow: inset rgba(0,0,0,0.2) 0px 5px 6px ;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
position: absolute;
}
.butt {
position: absolute;
width: 80px;
height: 52px;
left: 10px;
top: 10px;
cursor: pointer;
font-family: "Lucida Sans";
font-weight: bold;
font-size: 23px;
color: #888;
text-shadow: 0px 1px 0px #fff;
text-align: center;
padding-top: 28px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
background-image: -webkit-linear-gradient(top, #eee, #bbb 70%, #9f9f9f 100% );
background-image: -moz-linear-gradient(top, #eee, #bbb 70%, #9f9f9f 100% );
background-image: -ms-linear-gradient(top, #eee, #bbb 70%, #9f9f9f 100% );
background-image: -o-linear-gradient(top, #eee, #bbb 70%, #9f9f9f 100% );
background-image: linear-gradient(top, #eee, #bbb 70%, #9f9f9f 100% );
background-position: 0 6px;
background-color: #eee;
background-repeat: no-repeat;
-webkit-box-shadow: rgba(0,0,0,.4) 0 3px 6px;
-moz-box-shadow: rgba(0,0,0,.4) 0 3px 6px;
box-shadow: rgba(0,0,0,.4) 0 3px 6px;
-webkit-transition: all .1s ease-in;
-moz-transition: all .1s ease-in;
-ms-transition: all .1s ease-in;
-o-transition: all .1s ease-in;
transition: all .1s ease-in;
}
.butt:hover {
background-position: 0 0px;
-webkit-box-shadow: rgba(0,0,0,.4) 0 3px 8px;
-moz-box-shadow: rgba(0,0,0,.4) 0 3px 8px;
box-shadow: rgba(0,0,0,.4) 0 3px 8px;
}
.butt:active {
width: 76px;
height: 48px;
margin: 2px 0 0 2px;
border-bottom: 1px solid #fff;
font-size: 21px;
color: #777;
-webkit-box-shadow: inset rgba(0,0,0,.5) 0px 5px 10px;
-moz-box-shadow: inset rgba(0,0,0,.5) 0px 5px 10px;
box-shadow: inset rgba(0,0,0,.5) 0px 5px 10px;
}
效果图:
以上分享了一个很有金属感的按钮代码,更多炫酷效果,请关注我!
php漂亮按钮代码,分享一款金属感十足的按钮样式代码相关推荐
- python有趣的代码-分享几款由quot;Python”语言编写的quot;有趣、恶搞、好玩”的程序代码...
为提高大家对"Python"编程语言的学习兴趣,今天给大家分享几款有趣的Python程序代码,感兴趣的小伙伴可以跟着学习借鉴哦!qq进群:156846986可以获取Python学习 ...
- 悬浮按钮app_分享一款网页转App的神器,绝对值得一用
分享一款制作安卓app的神器:名字叫做Fusion Apps,这款神器的主要作用就是可以制作属于自己的网页APP,这款软件的列害之处是他不光可以通过网页制作app,而且可以自己自定义制作,非常具有实用 ...
- html插图动物主题代码,分享9款用HTML5/CSS3制作的动物、人物动画
本文作者html5tricks,转载请注明出处 今天我们要来分享一些设计非常独特的人物和动物动画效果,它们都是通过 1.纯CSS3绘制可爱的蚱蜢 还有眨眼动画 今天我们要分享一个利用纯CSS3绘制的蚱 ...
- php欢迎界面代码,分享微信小程序欢迎界面开发的实例代码
这篇文章主要分享微信小程序欢迎界面开发的实例代码的相关资料,这里实现欢迎界面的简单实例和实现代码及实现效果图,需要的朋友可以参考下 微信小程序 欢迎界面 市面上大多数的app都会有一个欢迎界面,下面将 ...
- jeecg-boot自动生成代码_一款自动生成唯一头像的开源代码库
很多网站会给默认登陆的用户生成默认的头像,包括 GitHub 其实就有,你想知道是怎么实现的么? 今天的推荐的就是一个能够按唯一 Email.ID 或者用户名生成唯一头像的开源代码库:generate ...
- 代码jquery分享一款jquery加载csv文件的代码
PS:今天上午,非常郁闷,有很多简单基础的问题搞得我有些迷茫,哎,代码几天不写就忘.目前又不当COO,还是得用心记代码哦! /** csv文件加载 扩展* @author 周靖杰* @date 201 ...
- 【代码分享】TRL微波器件测量去嵌入校准–程序代码
写在前面 由于研究需要,本人深入学习实践了基于微波测试的器件仿真建模技术,至今九年有余.回顾研究经历,从最简单的直通校准到严格的TRL校准,从普通的SAM焊接接头到精密的V波段免焊接接头,从0603封 ...
- android 蓝牙打印代码,分享一个b4a下安卓操作蓝牙打印机的代码
b4a的 用到 Serial的库 实测过能用 另外:有人有 zxing_b4a_1.3plus_lib_demo.zip 的库没有? 关键代码 Sub Process_Globals Dim ...
- html背景样式代码,12种纯CSS实现的背景图案样式代码
这是使用纯css实现的背景图案样式,可以作用于任何元素甚至文本背景. 使用方法: 1使用NPM安装并下载pattern.css. 2导入pattern.css. 3.或在html文档中加载patter ...
最新文章
- 图像翻译 相关 跨物种
- 三星全球首家量产18nm DRAM
- python第三方库有哪些常用的、请列举15个-python基础面试常见题
- 在内地城区经济发展中冒头,长沙雨花是如何做到的?
- php写简单的随机验证码
- 拆卸invokedynamic
- 论文浅尝 | 面向简单知识库问答的模式修正强化策略
- mysql 联合主键_深入理解Mysql索引底层数据结构与算法,背后的故事
- Exchange 2013 SP1部署系列7:发送连接器的配置
- php之time的用法,php中time()与$_SERVER[REQUEST_TIME]用法区别
- 理财产品收益可以保证吗?
- 虚拟机centos6.5 --安装jdk
- VMware Workstation Pro新建虚拟机的操作步骤(插图)
- 缠中说禅重新编排版《论语》(整理版)
- android7.1获取存储权限,Android外部存储
- STK和c语言集成开发,STKX组件实现c#与stk的集成.pdf
- 适合中小企业发展的内网即时通讯软件应该具备什么
- 安装黑苹果先判断你的电脑硬件是否有驱动支持
- 最短路径系列【最短路径、哈密顿路等】
- 【重磅】凯文.凯利8个小时演讲实录