【CSS3 探索发现】系列二：打造一组闪亮的半透明按钮效果

这是《CSS3 探索发现》系列文章的第二篇，分享一组闪亮的半透明 CSS3 按钮效果。CSS3 为网页设计引入了众多强大的新功能，让设计和开发人员能够轻松的创作出精美的界面效果。推荐阅读：《CSS3 探索发现系列一：一组梦幻般的 CSS3 动画按钮效果》

 

 

这些闪亮的按钮使用了两个 DIV 实现，一个是按钮主要部分，一个是用来显示光泽。下面是在线演示，很漂亮吧？把鼠标放在按钮上试试，有惊喜哦！（温馨提示：在 Chrome，Firefox 和 Safari 浏览器中效果最佳，如果无法显示请刷新页面或者访问链接：在线演示）

 

 

HTML 部分非常简单，代码如下：

<div class="button gray"><div class="shine"></div>Button</div><div class="button blue"><div class="shine"></div>Button</div><div class="button green"><div class="shine"></div>Button</div><div class="button red"><div class="shine"></div>Button</div><div class="button purple"><div class="shine"></div>Button</div><div class="button orange"><div class="shine"></div>Button</div>

这些精美的效果用到了 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;}

完整的 CSS 代码如下：

.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;    text-shadow: rgba(0,0,0,0.9) 0px 1px 2px;        background: #434343;    border: 1px solid #242424;       -webkit-border-radius: 4px;     -khtml-border-radius: 4px;       -moz-border-radius: 4px;         -o-border-radius: 4px;            border-radius: 4px;    -webkit-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;     -khtml-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;       -moz-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;         -o-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;            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;    -webkit-transition: all 0.1s linear;     -khtml-transition: all 0.1s linear;       -moz-transition: all 0.1s linear;         -o-transition: all 0.1s linear;            transition: all 0.1s linear;}.button:hover {    -webkit-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;     -khtml-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;       -moz-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;         -o-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;            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;}.button:active {    -webkit-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px,inset rgba(255,255,255,0) 0px 1px 0px, inset rgba(0,0,0,0.5) 0px 0px 5px, 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;     -khtml-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px,inset rgba(255,255,255,0) 0px 1px 0px, inset rgba(0,0,0,0.5) 0px 0px 5px, 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;       -moz-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0) 0px 1px 0px, inset rgba(0,0,0,0.5) 0px 0px 5px, 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;         -o-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0) 0px 1px 0px, inset rgba(0,0,0,0.5) 0px 0px 5px, 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;            box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0) 0px 1px 0px, inset rgba(0,0,0,0.5) 0px 0px 5px, 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;    background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0)));    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);    background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);    background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);    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;    -webkit-box-shadow: rgba(255,255,255,0.2) 0px 1px 5px;     -khtml-box-shadow: rgba(255,255,255,0.2) 0px 1px 5px;       -moz-box-shadow: rgba(255,255,255,0.2) 0px 1px 5px;         -o-box-shadow: rgba(255,255,255,0.2) 0px 1px 5px;            box-shadow: rgba(255,255,255,0.2) 0px 1px 5px;    -webkit-transition: all 0.3s ease-in-out;     -khtml-transition: all 0.3s ease-in-out;       -moz-transition: all 0.3s ease-in-out;         -o-transition: all 0.3s ease-in-out;            transition: all 0.3s ease-in-out;}

完整源码下载    在线效果演示

 

梦天空博客关注 前端开发 技术，分享各种增强网站用户体验的 jQuery 插件，展示前沿的 HTML5 和 CSS3 技术应用，推荐优秀的 网页设计 案例，共享精美的设计素材和优秀的 Web 开发工具。

您可能感兴趣的相关文章

• Web 开发人员和设计师必读文章推荐
• 20个非常绚丽的 CSS3 特性应用演示
• 35个让人惊讶的 CSS3 动画效果演示
• 推荐12个漂亮的 CSS3 按钮实现方案
• 24款非常实用的 CSS3 工具终极收藏

 

本文链接：CSS3 探索发现系列：一组闪亮的半透明按钮效果

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

hide