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

  这是《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 开发工具。

 

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

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

赞 (0) 打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏