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基础(RGBa、text-shadow、box-shadow、border-radius)
Nov 13 HTML / CSS
常用的四种CSS透明属性介绍
Apr 12 HTML / CSS
CSS3制作文字半透明倒影效果的两种实现方式
Aug 08 HTML / CSS
CSS3使用border-radius属性制作圆角
Dec 22 HTML / CSS
CSS3实现文字波浪线效果示例代码
Nov 20 HTML / CSS
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
Jan 06 HTML / CSS
Html5实现如何在两个div元素之间拖放图像
Mar 29 HTML / CSS
HTML5 Canvas——用路径描画线条实例介绍
Jun 09 HTML / CSS
html5菜单折纸效果
Apr 22 HTML / CSS
深入解析HTML5 Canvas控制图形矩阵变换的方法
Mar 24 HTML / CSS
详解前端HTML5几种存储方式的总结
Dec 27 HTML / CSS
详解如何在登录过期后跳出Ifram框架
Sep 10 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
五个PHP程序员工具
2008/05/26 PHP
在PHP中运行Linux命令并启动SSH服务的例子
2014/06/12 PHP
ThinkPHP表单数据智能写入create方法实例分析
2015/09/27 PHP
特殊字符、常规符号及其代码对照表
2006/06/26 Javascript
在JavaScript中typeof的用途介绍
2013/04/11 Javascript
Javascript 按位取反运算符 (~)
2014/02/04 Javascript
javascript工厂方式定义对象
2014/12/26 Javascript
jQuery表格行上移下移和置顶的实现方法
2015/10/08 Javascript
基于Javascript实现返回顶部按钮
2016/02/29 Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
2016/08/30 Javascript
ES6 javascript中Class类继承用法实例详解
2017/10/30 Javascript
基于vue 添加axios组件,解决post传参数为null的问题
2018/03/05 Javascript
详解JavaScript中typeof与instanceof用法
2018/10/24 Javascript
微信小程序利用swiper+css实现购物车商品删除功能
2019/03/06 Javascript
Layui表格监听行单双击事件讲解
2019/11/14 Javascript
详解如何在JS代码中消灭for循环
2019/12/11 Javascript
element el-tree组件的动态加载、新增、更新节点的实现
2020/02/27 Javascript
JS跨浏览器解析XML应用过程详解
2020/10/16 Javascript
使用原生javascript开发计算器实例代码
2021/02/21 Javascript
javascript实现倒计时提示框
2021/03/02 Javascript
Python利用ansible分发处理任务
2015/08/04 Python
python 读文件,然后转化为矩阵的实例
2018/04/23 Python
详解opencv Python特征检测及K-最近邻匹配
2019/01/21 Python
Python实现的文轩网爬虫完整示例
2019/05/16 Python
python关闭占用端口方式
2019/12/17 Python
浅谈在JupyterNotebook下导入自己的模块的问题
2020/04/16 Python
200行python代码实现贪吃蛇游戏
2020/04/24 Python
使用Python matplotlib作图时,设置横纵坐标轴数值以百分比(%)显示
2020/05/16 Python
eBay意大利购物网站:eBay.it
2019/09/04 全球购物
先进个人事迹材料
2014/01/25 职场文书
学生感冒英文请假条
2014/02/04 职场文书
《中彩那天》教学反思
2014/02/22 职场文书
党员岗位承诺书
2014/03/25 职场文书
《雕塑之美》教学反思
2014/04/24 职场文书
小学校长先进事迹材料
2014/05/13 职场文书
关于成绩下滑的自我检讨书
2014/09/20 职场文书