css实现立体感按钮

简介: css实现立体感按钮

<view class="envelope_bgc_chunk"></view>
   .envelope_bgc_chunk{
      width: 60rpx;
      height: 100rpx;
      background-color: #83baff;
      border-radius: 8rpx;
     // 立体按钮其实就是这一行的效果
      box-shadow: 0px 0px 2px 2px rgba(55, 114, 203,0.2),
      /*下面深蓝色立体阴影*/
      0px 0px 6px 1px #4379d0,
                        /*内部暗色阴影*/
      0 -15px 2px 2px rgba(55, 114, 203,0.10) inset;
    }
目录
相关文章
|
3月前
|
前端开发 UED
设计新潮流:CSS动画毛玻璃按钮,展开效果引人入胜!
设计新潮流:CSS动画毛玻璃按钮,展开效果引人入胜!
|
3月前
|
前端开发 搜索推荐 容器
创意按钮,触手可及:CSS不规则形状效果揭秘!
创意按钮,触手可及:CSS不规则形状效果揭秘!
|
3月前
|
前端开发
css来实现一个好玩的按钮
这段代码实现了一个具有独特悬停效果的按钮。通过定义按钮及其`:after`伪元素,并设置初始状态下的透明度和尺寸,当鼠标悬停在按钮上时,背景色平滑过渡至另一种颜色,产生视觉上的动态扩展效果。为避免覆盖文字,特地调整了伪元素的层级,确保交互过程中文字始终可见。整体效果流畅自然,增强了用户界面的互动性与美观度。
56 0
|
4月前
|
前端开发
css特效——纯css绘制图标:带框的加号(添加按钮)、三横(三道杠)、带圈点(双层圆点)
css特效——纯css绘制图标:带框的加号(添加按钮)、三横(三道杠)、带圈点(双层圆点)
125 5
|
5月前
|
前端开发
CSS动画(毛玻璃按钮)
CSS动画(毛玻璃按钮)
|
5月前
|
前端开发
CSS动画效果(鼠标滑过按钮动画)
CSS动画效果(鼠标滑过按钮动画)
|
4月前
|
前端开发 SEO
css实用技巧——最佳可访问性隐藏(网站左上角的logo,用label替代表单提交按钮)
css实用技巧——最佳可访问性隐藏(网站左上角的logo,用label替代表单提交按钮)
41 0
|
5月前
|
前端开发
css html 渐变按钮
css html 渐变按钮
28 0
|
6月前
|
前端开发
css样式实现一个滑动按钮
css样式实现一个滑动按钮
57 0

热门文章

最新文章