使用 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 记住啦:)
欢迎任何形式的转载,但请务必注明出处。

相关文章
|
10月前
|
JavaScript 前端开发
jQuery和CSS3滑动展开菜单按钮插件
这是一款jQuery和CSS3滑动展开菜单按钮插件。该滑动展开菜单按钮在用户点击主菜单按钮之后,子菜单以滑动的方式依次展开
131 21
|
前端开发
css特效——纯css绘制图标:带框的加号(添加按钮)、三横(三道杠)、带圈点(双层圆点)
css特效——纯css绘制图标:带框的加号(添加按钮)、三横(三道杠)、带圈点(双层圆点)
384 5
|
前端开发 UED
设计新潮流:CSS动画毛玻璃按钮,展开效果引人入胜!
设计新潮流:CSS动画毛玻璃按钮,展开效果引人入胜!
|
前端开发 搜索推荐 容器
创意按钮,触手可及:CSS不规则形状效果揭秘!
创意按钮,触手可及:CSS不规则形状效果揭秘!
|
前端开发
CSS动画(毛玻璃按钮)
CSS动画(毛玻璃按钮)
|
前端开发
CSS动画效果(鼠标滑过按钮动画)
CSS动画效果(鼠标滑过按钮动画)
|
前端开发
css来实现一个好玩的按钮
这段代码实现了一个具有独特悬停效果的按钮。通过定义按钮及其`:after`伪元素,并设置初始状态下的透明度和尺寸,当鼠标悬停在按钮上时,背景色平滑过渡至另一种颜色,产生视觉上的动态扩展效果。为避免覆盖文字,特地调整了伪元素的层级,确保交互过程中文字始终可见。整体效果流畅自然,增强了用户界面的互动性与美观度。
120 0
|
前端开发 SEO
css实用技巧——最佳可访问性隐藏(网站左上角的logo,用label替代表单提交按钮)
css实用技巧——最佳可访问性隐藏(网站左上角的logo,用label替代表单提交按钮)
111 0
|
前端开发
css html 渐变按钮
css html 渐变按钮
56 0
|
前端开发
css样式实现一个滑动按钮
css样式实现一个滑动按钮
136 0