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

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

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

 

源码下载     在线演示

 

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

[code lang=”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;
/* 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;
}[/code]

源码下载    在线演示

 收藏 (0) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

除特别注明外,本站所有文章均基于CC-BY-NC-SA 4.0原创,转载请注明出处。
文章名称:《使用 CSS3 打造一组质感细腻丝滑的按钮》
文章链接:https://www.lbyxlz.com/%e4%bd%bf%e7%94%a8-css3-%e6%89%93%e9%80%a0%e4%b8%80%e7%bb%84%e8%b4%a8%e6%84%9f%e7%bb%86%e8%85%bb%e4%b8%9d%e6%bb%91%e7%9a%84%e6%8c%89%e9%92%ae/
分享到: 生成海报

评论 抢沙发

  • QQ号
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
切换注册

登录

点击按钮进行验证

忘记密码 ?

您也可以使用第三方帐号快捷登录

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活