html实现3D按钮,纯css3实现的3D按钮
前面已经为大家介绍了好多纯css3实现的按钮。今天要再给大家带来一款纯css3实现的3D按钮。在实例中给出了五种颜色的3D按钮。效果图如下:
实现的代码。
html代码:
CSS
3D
Buttons
s3-btn1
s3-btn2
s3-btn3
s3-btn4
s3-btn5
css3代码:
body
{
font-family: 'Open Sans' , sans-serif;
background-image: url(blurred-background-images-photos-0322125813.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-attachment: fixed;
}
h1
{
text-align: center;
}
p
{
margin: 1em;
padding: 1em;
text-align: center;
}
.s3-btn1, .s3-btn2, .s3-btn3, .s3-btn4, .s3-btn5, a.s3-btn1, a.s3-btn2, a.s3-btn3, a.s3-btn4, a.s3-btn5
{
outline: none;
text-decoration: none !important;
margin: 0 auto;
padding: 1em 3em;
border-radius: 5px;
-webkit-transition: all 100ms linear;
transition: all 100ms linear;
touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
position: relative;
text-align: center;
}
.s3-btn1
{
color: #ffffff;
background: -webkit-linear-gradient(top, #c03718 0%, #e44a27 100%);
background: linear-gradient(to bottom, #c03718 0%, #e44a27 100%);
border: 1px solid #a93115;
box-shadow: 0px 4px 0px 0px #a93115, 0px 5px 12px 0px rgba(0, 0, 0, 0.6), inset 0px 0px 10px -5px #000000;
}
.s3-btn1:hover
{
background: -webkit-linear-gradient(top, #c03718 0%, #d73e1b 100%);
background: linear-gradient(to bottom, #c03718 0%, #d73e1b 100%);
}
.s3-btn1:hover:active
{
border: none !important;
top: 4px;
box-shadow: 0px 2px 0px 0px #a93115, 0px 5px 12px 0px rgba(0, 0, 0, 0.6), inset 0px 0px 10px -5px #000000;
}
.s3-btn2
{
color: #ffffff;
background: -webkit-linear-gradient(top, #6fbdbf 0%, #92cdcf 100%);
background: linear-gradient(to bottom, #6fbdbf 0%, #92cdcf 100%);
border: 1px solid #5db5b8;
box-shadow: 0px 4px 0px 0px #5db5b8, 0px 5px 12px 0px rgba(0, 0, 0, 0.6), inset 0px 0px 10px -5px #000000;
}
.s3-btn2:hover
{
background: -webkit-linear-gradient(top, #6fbdbf 0%, #80c5c7 100%);
background: linear-gradient(to bottom, #6fbdbf 0%, #80c5c7 100%);
}
.s3-btn2:hover:active
{
border: none !important;
top: 4px;
box-shadow: 0px 2px 0px 0px #5db5b8, 0px 5px 12px 0px rgba(0, 0, 0, 0.6), inset 0px 0px 10px -5px #000000;
}
.s3-btn3
{
color: #ffffff;
background: -webkit-linear-gradient(top, #a8e427 0%, #baea54 100%);
background: linear-gradient(to bottom, #a8e427 0%, #baea54 100%);
border: 1px solid #9bd71a;
box-shadow: 0px 4px 0px 0px #9bd71a, 0px 5px 12px 0px rgba(0, 0, 0, 0.6), inset 0px 0px 10px -5px #000000;
}
.s3-btn3:hover
{
background: -webkit-linear-gradient(top, #a8e427 0%, #b1e73d 100%);
background: linear-gradient(to bottom, #a8e427 0%, #b1e73d 100%);
}
.s3-btn3:hover:active
{
border: none !important;
top: 4px;
box-shadow: 0px 2px 0px 0px #9bd71a, 0px 5px 12px 0px rgba(0, 0, 0, 0.6), inset 0px 0px 10px -5px #000000;
}
.s3-btn4
{
color: #ffffff;
background: -webkit-linear-gradient(top, #70df9e 0%, #9ae8ba 100%);
background: linear-gradient(to bottom, #70df9e 0%, #9ae8ba 100%);
border: 1px solid #5cda8f;
box-shadow: 0px 4px 0px 0px #5cda8f, 0px 5px 12px 0px rgba(0, 0, 0, 0.6), inset 0px 0px 10px -5px #000000;
}
.s3-btn4:hover
{
background: -webkit-linear-gradient(top, #70df9e 0%, #85e3ac 100%);
background: linear-gradient(to bottom, #70df9e 0%, #85e3ac 100%);
}
.s3-btn4:hover:active
{
border: none !important;
top: 4px;
box-shadow: 0px 2px 0px 0px #5cda8f, 0px 5px 12px 0px rgba(0, 0, 0, 0.6), inset 0px 0px 10px -5px #000000;
}
.s3-btn5
{
color: #ffffff;
background: -webkit-linear-gradient(top, #161616 0%, #2f2f2f 100%);
background: linear-gradient(to bottom, #161616 0%, #2f2f2f 100%);
border: 1px solid #090909;
box-shadow: 0px 4px 0px 0px #090909, 0px 5px 12px 0px rgba(0, 0, 0, 0.6), inset 0px 0px 10px -5px #000000;
}
.s3-btn5:hover
{
background: -webkit-linear-gradient(top, #161616 0%, #222222 100%);
background: linear-gradient(to bottom, #161616 0%, #222222 100%);
}
.s3-btn5:hover:active
{
border: none !important;
top: 4px;
box-shadow: 0px 2px 0px 0px #090909, 0px 5px 12px 0px rgba(0, 0, 0, 0.6), inset 0px 0px 10px -5px #000000;
}
html实现3D按钮,纯css3实现的3D按钮相关推荐
- 推荐10款纯css3实现的实用按钮
在2014年的双11即将来临之季,爱编程小编为大家整理10款纯css3实现的按钮.希望这对坚守在前端的码农们有所帮助.亲,如果你有好的资源也可在本文留言,让从事编码的程序员们抱团.工作更轻松. No1 ...
- 纯CSS3炫酷3D星空动画特效
效果: 源码: <!DOCTYPE html> <html lang="zh"> <head><meta charset="UT ...
- html5 css3鼠标滑过效果,纯CSS3鼠标滑过按钮流光效果
这是一款效果非常炫酷的纯CSS3鼠标滑过按钮流光效果.当用户用鼠标滑过按钮的时候,一道流光会瞬间滑过按钮,就像玻璃的反光效果,非常漂亮. 使用方法 HTML结构 该效果中的按钮是一个超链接元素. Li ...
- html制作3d按钮,纯CSS3 3D按钮 按钮酷似牛奶般剔透
本文作者html5tricks,转载请注明出处 接下来我们来分析一下实现这款CSS3 3D按钮的步骤及其代码,总体而言,这款CSS3 3D按钮主要由HTML代码和CSS代码组成.实现原理是用两个spa ...
- [原创]纯CSS3打造的3D翻页翻转特效
刚接触CSS3动画,心血来潮实现了一个心目中自己设计的翻页效果的3D动画,页面纯CSS3,目前只能在Chrome中玩,理论上可以支持Safari. 1. 新建HTML,代码如下(数据和翻页后的数据都是 ...
- php星空背景动态,纯CSS3炫酷3D星空动画特效
简要教程 这是一款使用纯CSS3制作的炫酷3D星空动画特效.该特效中,以飞船向前快速移动为视角,所有的星星都快速的变大并向后移动,效果非常逼真. 使用方法 HTML结构 该3D星空特效只使用一个 元素 ...
- 用html浮雕效果图,纯CSS3炫酷3D浮雕质感文字动画特效
这是一款效果非常酷的纯CSS3 3D浮雕质感文字动画特效.该特效中文字被制作为浮雕文字,就像是从一块石板上将文字雕刻下来的一样.而且文字还会来回的摆动旋转,效果非常好. 制作方法 HTML结构 该CS ...
- html5可折叠面板,纯CSS3炫酷3D折叠面板动画特效
这是一款纯 CSS3 制作的炫酷3D折叠面板动画特效.这个效果使用3D CSS animations 来制作折叠面板的动画,纯CSS,没有使用javascript. HTML结构 折叠面板的html结 ...
- html3d旋转发光立方体,纯css3实现的3D立体动态旋转立方体特效
CSS3 3D立方体多边形动画特效 - 代码笔记 *{ margin:0 auto; padding:0; } @keyframes rotate{ 0%{ transform:rotateX(0de ...
最新文章
- 因为看见,所以发现:QBotVariant谢绝落幕
- 半导体并购停不下来 ADI拟148亿美元收购Linear
- 全球缺芯+瑞萨火灾——网络营销之下一众车企减产的减产,停产的停产
- blockingqueue java_记录 Java 的 BlockingQueue 中的一些坑
- git中如何合并某个指定文件?
- 第六篇:如何学习C语言?
- This may cause things to work incorrectly. Make sure to use the same version for both.
- 常见错误:未能加载文件或程序集
- 11月TIOBE编程语言排行榜,OC已经掉出前十
- 程序设计习惯养成计划---一、方法规约设计
- 【路径规划】基于matlab蚁群算法求解机器人栅格地图最短路径规划问题【含Matlab源码 1618期】
- android分享文字到朋友圈,微信,分享朋友圈,只能分享图,文字带不过来,这是什么原因?是BUG吗?...
- .NET反编译之manager,base.AutoScaleMode修复
- 意畅科技:亲近用户 升级服务 谋就网络安全行业市场 | 企业服务代理商系列谈...
- 8.声卡驱动02-自己实现alsa驱动-虚拟声卡-匹配
- 2.6一个小工具的使用snipaste
- Gossip协议笔记--谣言、流行病协议
- 【EXLIBRIS】#小词旮旯#
- 使用 Wowza IDE 开发第一个 Wowza 服务器扩展应用 -- 监控直播频道
- 将markdown 文件渲染 mhtml 的方式