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实现同时执行倾斜和旋转的动画效果
Oct 27 HTML / CSS
详解CSS3中的box-sizing(content-box与border-box)
Apr 19 HTML / CSS
HTML5新控件之日期和时间选择输入的实现代码
Sep 13 HTML / CSS
Html5页面在微信端的分享的实现方法
Aug 30 HTML / CSS
详解如何用canvas画一个微笑的表情
Mar 14 HTML / CSS
HTML5 Canvas中使用用路径描画圆弧
Jan 01 HTML / CSS
整理HTML5中表单的常用属性及新属性
Feb 19 HTML / CSS
HTML5页面音视频在微信和app下自动播放的实现方法
Oct 20 HTML / CSS
HTML5拖拉上传文件的简单实例
Jan 11 HTML / CSS
关于h5中的fetch方法解读(小结)
Nov 15 HTML / CSS
AmazeUI 按钮交互的实现示例
Aug 24 HTML / CSS
css中:last-child不生效的解决方法
Aug 05 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
单位速度在实战中的运用
2020/03/04 星际争霸
MySQL相关说明
2007/01/15 PHP
PHP 巧用数组降低程序的时间复杂度
2010/01/01 PHP
获取远程文件大小的php函数
2010/01/11 PHP
php中stdClass的用法分析
2015/02/27 PHP
php实现生成验证码实例分享
2016/04/10 PHP
yii2 RBAC使用DbManager实现后台权限判断的方法
2016/07/23 PHP
IE和Mozilla的兼容性汇总event
2007/08/12 Javascript
js 加载时自动调整图片大小
2008/05/28 Javascript
jQuery拖动图片删除示例
2013/05/10 Javascript
jQuery实现可拖动的浮动层完整代码
2013/05/27 Javascript
javascript实现复选框选中属性
2015/03/25 Javascript
简单对比分析JavaScript中的apply,call与this的使用
2015/12/04 Javascript
jQuery事件的绑定、触发、及监听方法简单说明
2016/05/10 Javascript
JavaScript中的ParseInt(&quot;08&quot;)和“09”返回0的原因分析及解决办法
2016/05/19 Javascript
微信小程序之拖拽排序(代码分享)
2017/01/21 Javascript
Vue2.0 多 Tab切换组件的封装实例
2017/07/28 Javascript
VueAwesomeSwiper在VUE中的使用以及遇到的一些问题
2018/01/11 Javascript
js+canvas实现滑动拼图验证码功能
2018/03/26 Javascript
vue实现PC端录音功能的实例代码
2019/06/05 Javascript
微信小程序如何刷新当前界面的实现方法
2019/06/07 Javascript
JS实现的排列组合算法示例
2019/07/16 Javascript
swiper自定义分页器的样式
2020/09/14 Javascript
linux系统使用python获取cpu信息脚本分享
2014/01/15 Python
python常见数制转换实例分析
2015/05/09 Python
在centos7中分布式部署pyspider
2017/05/03 Python
Python通过future处理并发问题
2017/10/17 Python
解决Python的str强转int时遇到的问题
2018/04/09 Python
Jupyter Notebook输出矢量图实例
2020/04/14 Python
Python实现弹球小游戏
2020/08/01 Python
Python钉钉报警及Zabbix集成钉钉报警的示例代码
2020/08/17 Python
CSS3模拟动画下拉菜单效果
2017/04/12 HTML / CSS
美国廉价机票预订网站:Cheapfaremart
2018/04/28 全球购物
中式面点餐厅创业计划书
2014/01/29 职场文书
求职简历的自我评价
2014/01/31 职场文书
学校2016年九九重阳节活动总结
2016/04/01 职场文书