[CSS3技术]利用CSS3打造一组质感细腻丝滑的按钮

楼主^#

更多发布于：2015-06-24 13:58

firefox 浏览器 background 在线演示 display

[tr][td]

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

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

图片：095511gs1w2eg3s36w16g8.jpg

在线演示源码下载

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

[/td][/tr]

喜欢52 评分0