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实现背景模糊的三种方式
Mar 09 HTML / CSS
css3动画事件—webkitAnimationEnd与计时器time事件
Jan 31 HTML / CSS
CSS3实现的闪烁跳跃进度条示例(附源码)
Aug 19 HTML / CSS
举例详解CSS3中的Transition
Jul 15 HTML / CSS
CSS3绘制超炫的上下起伏波动进度加载动画
Apr 21 HTML / CSS
css3 pointer-events 介绍详解
Sep 18 HTML / CSS
详解css3 flex弹性盒自动铺满写法
Sep 17 HTML / CSS
HTML5等待加载动画效果
Jul 27 HTML / CSS
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
Jan 30 HTML / CSS
html5+css3实现一款注册表单实例
Apr 17 HTML / CSS
HTML5 canvas画图并保存成图片的jcanvas插件
Jan 17 HTML / CSS
html5中使用hotcss.js实现手机端自适配的方法
Apr 23 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
PHPWind与Discuz截取字符函数substrs与cutstr性能比较
2011/12/05 PHP
ThinkPHP的RBAC(基于角色权限控制)深入解析
2013/06/17 PHP
解析php中array_merge与array+array的区别
2013/06/21 PHP
浅谈php命令行用法
2015/02/04 PHP
PHP面向对象之后期静态绑定功能介绍
2015/05/18 PHP
phpStudy 2016 使用教程详解(支持PHP7)
2017/10/18 PHP
浅谈PHP无限极分类原理
2019/03/14 PHP
JavaScript中的变量声明早于赋值分析
2012/03/01 Javascript
ECMAScript6的新特性箭头函数(Arrow Function)详细介绍
2014/06/07 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
2015/10/27 Javascript
Node.js操作Firebird数据库教程
2016/03/04 Javascript
详解JavaScript中的自定义事件编写
2016/05/10 Javascript
JS模拟bootstrap下拉菜单效果实例
2016/06/17 Javascript
jQuery操作json常用方法示例
2017/01/04 Javascript
JS+Ajax实现百度智能搜索框
2017/08/04 Javascript
原生js 封装get ,post, delete 请求的实例
2017/08/11 Javascript
jQuery实现简单的计时器功能实例分析
2017/08/29 jQuery
浅谈VUE监听窗口变化事件的问题
2018/02/24 Javascript
vue实现动态显示与隐藏底部导航的方法分析
2019/02/11 Javascript
微信小程序在text文本实现多种字体样式
2019/11/08 Javascript
Vue实现点击箭头上下移动效果
2020/06/11 Javascript
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
2020/08/03 Javascript
[46:16]2018DOTA2亚洲邀请赛3月30日 小组赛B组 iG VS VP
2018/03/31 DOTA
[02:28]PWL开团时刻DAY3——Ink Ice与DeMonsTer之间的勾心斗角
2020/11/03 DOTA
详解Python中的join()函数的用法
2015/04/07 Python
go和python变量赋值遇到的一个问题
2017/08/31 Python
python简单实现操作Mysql数据库
2018/01/29 Python
为什么入门大数据选择Python而不是Java?
2018/03/07 Python
德国户外装备、登山运动和攀岩商店:tapir store
2020/02/12 全球购物
工作交流会欢迎词
2014/01/12 职场文书
护士进修自我鉴定
2014/02/07 职场文书
开展批评与自我批评发言稿
2014/10/16 职场文书
供应商食品安全承诺书
2015/04/29 职场文书
立春观后感
2015/06/18 职场文书
好人好事新闻稿
2015/07/17 职场文书
Java后端 Dubbo retries 超时重试机制的解决方案
2022/04/14 Java/Android