css3制作彩色边线3d立体按钮的示例(css3按钮)


Posted in HTML / CSS onMay 06, 2014

今天我们来分享一款利用纯CSS3实现的3D按钮,这款按钮的一个特点是有彩色的边线,这让整个按钮显得比较多姿多彩,没那么枯燥无趣。本文不仅可以让大家看到演示效果,而且我们把制作教程也分享出来,首先来看看效果图:

css3制作彩色边线3d立体按钮的示例(css3按钮)

HTML代码

复制代码
代码如下:

<button class="blue">
<div class="wrapper">
<header>Teach me to fly like Superman and woo Lois Lane</header>
<div class="data"><em>Superpowers</em> <i class="icon-time"></i> exp: <span>Apr 18, 1938</span></div>
<p>£80</p>
<i class="icon-chevron-right"></i>
</div>
</button></p> <p> <button class="green">
<div class="wrapper">
<header>Teach me to play ukulele like Israel Kamakawiwo'ole</header>
<div class="data"><em>Music</em> <i class="icon-time"></i> exp: <span>May 20, 1959</span></div>
<p>£35</p>
<i class="icon-chevron-right"></i>
</div>
</button></p> <p> <button class="red">
<div class="wrapper">
<header>Teach me to be a javascript ninja like Mr Doob</header>
<div class="data"><em>Web Development</em> <i class="icon-time"></i> exp: <span>Apr 1, 2010</span></div>
<p>£60</p>
<i class="icon-chevron-right"></i>
</div>
</button></p> <p> <button>
<div class="wrapper">
<header>Teach me to cook like The Hairy Bikers</header>
<div class="data"><em>Cooking</em> <i class="icon-time"></i> exp: <span>Jul 07, 2013</span></div>
<p>£100</p>
<i class="icon-chevron-right"></i>
</div>
</button>

可以看到,HTML代码的结构也非常清楚,没有HTML5的元素,一个button和几个div元素而已。

这里我们定义了4个按钮,就像效果图上一样,每一个按钮都有不同颜色的边线,具体我们会在CSS代码中实现3D效果和边线效果。

接下来是CSS代码,先对所有的button进行统一样式的渲染:

复制代码
代码如下:

button {
display: block;
float: left;
margin: 0 0 1rem 0;
padding: 0;
border: 0;
height: 5rem;
width: 25rem;
border-radius: 0.4rem;
position: relative;
background: transparent;
outline: none;
}</p> <p>button .wrapper {
display: block;
float: left;
background: #fff;
border: 0;
height: 5rem;
width: 25rem;
border-radius: 0.4rem;
position: relative;
box-shadow: inset 0 -0.3rem 0 0 rgba(0, 0, 0, 0.2), 0 0.1rem 0 0 rgba(0, 0, 0, 0.2);
transition: height 0.08s, margin 0.08s, box-shadow 0.08s, background 0.08s;
background: -moz-linear-gradient(0deg, #4d4d4d 0%, #4d4d4d 2%, #ffffff 2%, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);
background: -webkit-linear-gradient(0deg, #4d4d4d 0%, #4d4d4d 2%, #ffffff 2%, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);
background: linear-gradient(90deg, #4d4d4d 0%, #4d4d4d 2%, #ffffff 2%, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);
}
button .wrapper:hover {
background: -moz-linear-gradient(0deg, #333333 0%, #333333 2%, #ffffff 2%, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);
background: -webkit-linear-gradient(0deg, #333333 0%, #333333 2%, #ffffff 2%, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);
background: linear-gradient(90deg, #333333 0%, #333333 2%, #ffffff 2%, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);
}
button .wrapper:active {
margin-top: 0.3rem;
height: 4.7rem;
box-shadow: none;
}

大家可以看到,所有按钮的基本外观就出来了,包括3D的效果。

然后就是对每个按钮的边线颜色以及鼠标滑过和按钮按下的样式进行定义:

复制代码
代码如下:

button.blue .wrapper {
background: -moz-linear-gradient(0deg, #7db2e8 0%, #7db2e8 2%, #ffffff 2%, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);
background: -webkit-linear-gradient(0deg, #7db2e8 0%, #7db2e8 2%, #ffffff 2%, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);
background: linear-gradient(90deg, #7db2e8 0%, #7db2e8 2%, #ffffff 2%, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);
}
button.blue .wrapper:hover {
background: -moz-linear-gradient(0deg, #5299e0 0%, #5299e0 2%, #ffffff 2%, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);
background: -webkit-linear-gradient(0deg, #5299e0 0%, #5299e0 2%, #ffffff 2%, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);
background: linear-gradient(90deg, #5299e0 0%, #5299e0 2%, #ffffff 2%, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);
}</p> <p>button.green .wrapper {
background: -moz-linear-gradient(0deg, #c4e87d 0%, #c4e87d 2%, #ffffff 2%, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);
background: -webkit-linear-gradient(0deg, #c4e87d 0%, #c4e87d 2%, #ffffff 2%, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);
background: linear-gradient(90deg, #c4e87d 0%, #c4e87d 2%, #ffffff 2%, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);
}
button.green .wrapper:hover {
background: -moz-linear-gradient(0deg, #b1e052 0%, #b1e052 2%, #ffffff 2%, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);
background: -webkit-linear-gradient(0deg, #b1e052 0%, #b1e052 2%, #ffffff 2%, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);
background: linear-gradient(90deg, #b1e052 0%, #b1e052 2%, #ffffff 2%, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);
}</p> <p>button.red .wrapper {
background: -moz-linear-gradient(0deg, #e87d7d 0%, #e87d7d 2%, #ffffff 2%, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);
background: -webkit-linear-gradient(0deg, #e87d7d 0%, #e87d7d 2%, #ffffff 2%, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);
background: linear-gradient(90deg, #e87d7d 0%, #e87d7d 2%, #ffffff 2%, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);
}
button.red .wrapper:hover {
background: -moz-linear-gradient(0deg, #e05252 0%, #e05252 2%, #ffffff 2%, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);
background: -webkit-linear-gradient(0deg, #e05252 0%, #e05252 2%, #ffffff 2%, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);
background: linear-gradient(90deg, #e05252 0%, #e05252 2%, #ffffff 2%, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);
}
HTML / CSS 相关文章推荐
css3 条纹化和透明化表格Firefox下测试成功
Apr 15 HTML / CSS
利用CSS3实现文本框的清除按钮相关的一些效果
Jun 23 HTML / CSS
用css3实现转换过渡和动画效果
Mar 13 HTML / CSS
HTML5的video标签的浏览器兼容性增强方案分享
May 19 HTML / CSS
网页中的电话号码如何实现一键直呼效果_附示例
Mar 15 HTML / CSS
HTML5本地存储之Web Storage应用介绍
Jan 06 HTML / CSS
Javascript 高级手势使用介绍
Apr 21 HTML / CSS
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
Jun 23 HTML / CSS
H5调用相机拍照并压缩图片的实例代码
Jul 20 HTML / CSS
手摸手教你用canvas实现给图片添加平铺水印的实现
Aug 20 HTML / CSS
解决HTML5中滚动到底部的事件问题
Aug 22 HTML / CSS
使用HTML5加载音频和视频的实现代码
Nov 30 HTML / CSS
css3实现顶部社会化分享按钮示例
May 06 #HTML / CSS
css3圆角边框和边框阴影示例
May 05 #HTML / CSS
CSS3 Columns分列式布局方法简介
May 03 #HTML / CSS
css3 2D图片转动样式可以扩充到Js当中
Apr 29 #HTML / CSS
CSS实现的一闪而过的图片闪光效果
Apr 23 #HTML / CSS
CSS改变网页中鼠标选中文字背景颜色例子
Apr 23 #HTML / CSS
CSS的pointer-events属性详细介绍(作用和注意事项)
Apr 23 #HTML / CSS
You might like
Excel数据导入Mysql数据库的实现代码
2008/06/05 PHP
ThinkPHP标签制作教程
2014/07/10 PHP
PHP中散列密码的安全性分析
2019/07/26 PHP
Js之软键盘实现(js源码)
2007/01/30 Javascript
JS实现点击图片在当前页面放大并可关闭的漂亮效果
2013/10/18 Javascript
jquery实现pager控件示例
2014/04/09 Javascript
js网页滚动条滚动事件实例分析
2015/05/05 Javascript
深入理解JavaScript中的箭头函数
2015/07/28 Javascript
jquery实现最简单的滑动菜单效果代码
2015/09/12 Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
2016/01/27 Javascript
JS中this上下文对象使用方式
2016/10/09 Javascript
Node.js发送HTTP客户端请求并显示响应结果的方法示例
2017/04/12 Javascript
WebSocket实现简单客服聊天系统
2017/05/12 Javascript
React中上传图片到七牛的示例代码
2017/10/10 Javascript
JS解决position:sticky的兼容性问题的方法
2017/10/17 Javascript
Element-ui tree组件自定义节点使用方法代码详解
2018/09/17 Javascript
简单了解vue.js数组的常用操作
2019/06/17 Javascript
微信小程序 自定义复选框实现代码实例
2019/09/04 Javascript
layui自己添加图片按钮并点击跳转页面的例子
2019/09/14 Javascript
vue实现拖拽进度条
2021/03/01 Vue.js
[01:00:25]2018DOTA2亚洲邀请赛3月30日 小组赛A组 VG VS Liquid
2018/03/31 DOTA
python列表操作之extend和append的区别实例分析
2015/07/28 Python
【Python】Python的urllib模块、urllib2模块批量进行网页下载文件
2016/11/19 Python
python time.sleep()是睡眠线程还是进程
2019/07/09 Python
python对csv文件追加写入列的方法
2019/08/01 Python
python利用后缀表达式实现计算器功能
2021/02/22 Python
html5记忆翻牌游戏实现思路及代码
2013/07/25 HTML / CSS
纽约家具、家居装饰和地毯店:ABC Carpet & Home
2017/06/21 全球购物
法国最大电子商务平台:Cdiscount
2018/03/13 全球购物
linux面试题参考答案(6)
2016/06/23 面试题
数字天堂软件测试面试题
2012/12/23 面试题
银行领导班子四风对照检查材料
2014/09/27 职场文书
老干部工作汇报材料
2014/10/28 职场文书
解析原生JS getComputedStyle
2021/05/25 Javascript
每日六道java新手入门面试题,通往自由的道路
2021/06/30 Java/Android
详解Vue3使用axios的配置教程
2022/04/29 Vue.js