使用 CSS3 打造一组质感细腻丝滑的按钮-阿里云开发者社区

开发者社区> 秋天风景> 正文

使用 CSS3 打造一组质感细腻丝滑的按钮

简介:   CSS3 引入了众多供功能强大的新特性,让设计和开发人员能够轻松的创作出各种精美的界面效果。下面这些发出闪亮光泽的按钮,很漂亮吧?把鼠标悬停在按钮上,还有动感的光泽移动效果。   温馨提示:为保证最佳的效果,请在 IE10+、Chrome、Firefox 和 Safari 等现代浏览器中浏览。
+关注继续查看

  CSS3 引入了众多供功能强大的新特性,让设计和开发人员能够轻松的创作出各种精美的界面效果。下面这些发出闪亮光泽的按钮,很漂亮吧?把鼠标悬停在按钮上,还有动感的光泽移动效果。

  温馨提示:为保证最佳的效果,请在 IE10+、Chrome、Firefox 和 Safari 等现代浏览器中浏览。

 

 

源码下载     在线演示

 

  这些精美的效果用到了 CSS3 RGBA、box-shadow(阴影)、border-radius(边框圆角)和 linear-gradient(线性渐变),为了便于阅读,精简后的公共部分的代码如下:

.button {
    min-height: 1.5em;
    display: inline-block;
    padding: 12px 36px;
    margin: 40px 5px 5px 0px;
    cursor: pointer;
    opacity: 0.9;
     
    color: #FFF;
    font-size: 1em;
    letter-spacing: 1px;
    /* X轴偏移1像素、Y轴偏移2像素、不透明度为0.9的黑色文本阴影 */
    text-shadow: rgba(0,0,0,0.9) 0px 1px 2px;
     
    background: #434343;
    border: 1px solid #242424;
    
    border-radius: 4px;
    /*
    使用多层阴影实现按钮立体效果
    第一层:Y轴偏移1像素、不透明度为0.25的白色外阴影效果
    第二层:Y轴偏移1像素、不透明度为0.25的白色内阴影效果
    第三层:偏移位0、不透明度为0.25的黑色外阴影效果
    第四层:Y轴偏移20像素、不透明度为0.03的白色内阴影效果
    第五层:X轴偏移-20像素、Y轴偏移20像素、不透明度为0.15的黑色内阴影效果
    第六层:X轴偏移20像素、Y轴偏移20像素、不透明度为0.05的白色内阴影效果
    */
    box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
    /* 让变化的属性在100毫秒内匀速过渡 */
    transition: all 0.1s linear;
}

.button:hover {
    /*
    鼠标悬停时的按钮多层阴影效果,和按钮默认时相比只是第一层有变化:
    第一层:X轴偏移2像素、Y轴偏移5像素、不透明度为0.5的黑色外阴影效果
    */
    box-shadow: rgba(0,0,0,0.5) 0px 2px 5px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
}

.shine {
    display: block;
    position: relative;
    /* IE下面使用滤镜实现渐变效果 */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 );
    /* 使用水平的线性渐变实现按钮顶部的关泽效果 */
    background: linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
    padding: 0px 12px;
    top: -12px;
    left: -24px;
    height: 1px;
    box-shadow: rgba(255,255,255,0.2) 0px 1px 5px;
    /* 让变化的属性在300毫秒内以ease-in-out(先加速后减速)方式过渡 */
    transition: all 0.3s ease-in-out;
}

  

源码下载    在线演示

 

您可能感兴趣的相关文章

 

本文链接:使用 CSS3 打造一组质感细腻丝滑的按钮效果

编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

作者:山边小溪
主站:yyyweb.com 记住啦:)
欢迎任何形式的转载,但请务必注明出处。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
优秀教程:使用 CSS3 动画实现的超炫的过渡特效
  Codrops 最近分享了一些很酷的图片切换灵感。有三种不同的用例:小的图像幻灯片,大标题幻灯片以及使用透明背景的产品幻灯片。状态转换使用 CSS 动画完成,我们能够定义从任何方向进来的图片的行为。
810 0
【CSS】使用CSS控制文字过多自动省略号
使用CSS可以设置一下样式: u,small{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -...
1008 0
如何用纯 CSS 创作从按钮两侧滑入装饰元素的悬停特效
效果预览 在线演示 按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。 https://codepen.io/comehope/pen/yRyOZr 可交互视频 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
814 0
使用PowerDesigner生成数据库测试数据
原文http://blog.csdn.net/horace20/article/details/6672081 特别说明:本文产生于个人工作总结,转载请注明原文出处http://blog.csdn.net/horace20 1、环境        PowerDesigner15.2.0.3042-BEAN+ MySQL5.5 + mysql-connector-odbc-5.1.8        以上软件在网上都很容易找到,这里就不再给出相关链接!系统环境为WindowsXP。
1029 0
一篇文章教会你使用html+css3制作炫酷效果
一篇文章教会你使用html+css3制作炫酷效果
465 0
QGraphicsItem如何使用信号/槽
简述 对于 QGraphicsItem 来说,信号/槽和属性机制不是它的一部分,因为它不继承自 QObject。这是一个出于性能考虑的设计决策,允许比较大的场景以及快速的交互。 特殊情况下,如果真的需要使用信号/槽,可以使用 QObject 的信号/槽和属性机制来扩展 QGraphicsItem。 简述 继承自 QObject 和 QGraphicsItem 继承
1392 0
+关注
秋天风景
既然选择了远方,便只顾风雨兼程。
2394
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载