纯CSS3实现牛奶般剔透的3D按钮特效

今天我们要来看一款非常特别的纯CSS3 3D按钮，它的外观酷似纯白剔透的牛奶，点击按钮的时候还会出现一种很柔和的弹力效果。按钮按下时，按钮会轻轻的弹动一下，非常逼真。本文我们在观赏演示的同时，也将源代码分享出来一起学习。

你也可以在这里查看在线演示

接下来我们来分析一下实现这款CSS3 3D按钮的步骤及其代码，总体而言，这款CSS3 3D按钮主要由HTML代码和CSS代码组成。实现原理是用两个span来替代checkbox选中和不选中两个状态的样式。

HTML代码：

<div><div><input type="checkbox"><span></span><span>+</span></div><div><input type="checkbox" checked><span></span><span>–</span></div>
</div>

HTML代码很简单，我们可以看出每个checkbox下面均定义了2个span，通过对这两个span样式的定义，我们就可以模拟出checkbox选中的动画效果了。

接下来是CSS代码：

.toggle {margin: 4px;display: inline-block;
}.toggle {box-shadow: inset 0 0 35px 5px rgba(0, 0, 0, 0.25), inset 0 2px 1px 1px rgba(255, 255, 255, 0.9), inset 0 -2px 1px 0 rgba(0, 0, 0, 0.25);border-radius: 8px;background: #ccd0d4;position: relative;height: 140px;width: 140px;
}
.toggle:before {box-shadow: 0 0 17.5px 8.75px white;border-radius: 118.3px;background: white;position: absolute;margin-left: -50.4px;margin-top: -50.4px;opacity: 0.2;content: "";height: 100.8px;width: 100.8px;left: 50%;top: 50%;
}
.toggle .button {-webkit-filter: blur(1px);-moz-filter: blur(1px);filter: blur(1px);transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1);box-shadow: 0 15px 25px -4px rgba(0, 0, 0, 0.5), inset 0 -3px 4px -1px rgba(0, 0, 0, 0.2), 0 -10px 15px -1px rgba(255, 255, 255, 0.6), inset 0 3px 4px -1px rgba(255, 255, 255, 0.2), inset 0 0 5px 1px rgba(255, 255, 255, 0.8), inset 0 20px 30px 0 rgba(255, 255, 255, 0.2);border-radius: 96.32px;position: absolute;background: #ccd0d4;margin-left: -48.16px;margin-top: -48.16px;display: block;height: 96.32px;width: 96.32px;left: 50%;top: 50%;
}
.toggle .label {transition: color 300ms ease-out;text-shadow: 1px 1px 3px #ccd0d4, 0 0 0 rgba(0, 0, 0, 0.8), 1px 1px 4px white;line-height: 139px;text-align: center;position: absolute;font-weight: 700;font-size: 42px;display: block;opacity: 0.9;height: 100%;width: 100%;color: rgba(0, 0, 0, 0.4);
}
.toggle input {opacity: 0;position: absolute;cursor: pointer;z-index: 1;height: 100%;width: 100%;left: 0;top: 0;
}
.toggle input:active ~ .button {box-shadow: 0 15px 25px -4px rgba(0, 0, 0, 0.4), inset 0 -8px 30px 1px rgba(255, 255, 255, 0.9), 0 -10px 15px -1px rgba(255, 255, 255, 0.6), inset 0 8px 25px 0 rgba(0, 0, 0, 0.4), inset 0 0 10px 1px rgba(255, 255, 255, 0.6);
}
.toggle input:active ~ .label {font-size: 40px;color: rgba(0, 0, 0, 0.45);
}
.toggle input:checked ~ .button {box-shadow: 0 15px 25px -4px rgba(0, 0, 0, 0.4), inset 0 -8px 25px -1px rgba(255, 255, 255, 0.9), 0 -10px 15px -1px rgba(255, 255, 255, 0.6), inset 0 8px 20px 0 rgba(0, 0, 0, 0.2), inset 0 0 5px 1px rgba(255, 255, 255, 0.6);
}
.toggle input:checked ~ .label {font-size: 40px;color: rgba(0, 0, 0, 0.4);
}

也没什么特别的，基本都是CSS3常用的一些属性，阴影动画什么的，我们只是通过对颜色的选取，以及合理地运用阴影特效，才用纯CSS3描绘出一个3D立体如牛奶般剔透的按钮动画特效。源代码下载>>

纯CSS3实现牛奶般剔透的3D按钮特效相关推荐

html制作3d按钮,纯CSS3 3D按钮按钮酷似牛奶般剔透
本文作者html5tricks,转载请注明出处接下来我们来分析一下实现这款CSS3 3D按钮的步骤及其代码,总体而言,这款CSS3 3D按钮主要由HTML代码和CSS代码组成.实现原理是用两个spa ...
前端开关按钮样式_7款外观迷人的HTML5/CSS3 3D按钮特效
下面我整理了7款外观都十分迷人的HTML5/CSS3 3D按钮特效,有几个还挺实用的,分享给大家. 1.CSS3超酷3D弹性按钮按钮实现非常简单之前我们分享过几款不错的CSS3 3D立体按钮,比如 ...
4. 纯 CSS 创作一个金属光泽 3D 按钮特效
4. 纯 CSS 创作一个金属光泽 3D 按钮特效原文地址:https://segmentfault.com/a/1190000014599280 HTML代码: <div class=&qu ...
CSS3白色质感3D按钮特效源码
这是一款css3白色质感3D按钮特效.该按钮使用svg做为图标,通过css3代码,打造出非常炫酷的3d按钮效果. [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Mf75 ...
html5 圆形加载进度条,纯css3超酷圆形Loading加载进度条特效
这是一款效果炫酷的纯css3圆形Loading加载进度条特效插件.该loading特效使用:before和:after伪元素来制作动画d的不同部分,然后给他们设置absolute定位和CSS tran ...
纯CSS3编写的红色下拉导航菜单js特效代码
下载地址一款纯css3 transition属性制作红色的导航菜单,鼠标悬停展开下拉菜单,支持三级下拉菜单代码.@charset "utf-8";/*导航栏*/.nav_menu ...
html5按钮自动特效,HTML5 svg和CSS3 22种炫酷鼠标点击按钮特效
这是一组效果非常炫酷的HTML5 svg和CSS3鼠标点击按钮特效.这组鼠标点击特效共有22种效果,大多数是在伪元素上使用CSS3 animations来制作动画效果.非常适合于移动手机APP上的按钮 ...
css炫酷标题,纯css3鼠标滑过图片炫酷标题显示特效
很多网站的图片鼠标滑过显示标题效果都是使用jQuery来完成的,现在,我们可以使用CSS3 animations来完成同样惊艳的效果.如果你对CSS3 animations还不了解,请先阅读CSS3 ...
如何用纯 CSS 创作一个金属光泽 3D 按钮特效
效果预览在线演示按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/full/MGeRRO 可交互视频教程此 ...

纯CSS3实现牛奶般剔透的3D按钮特效

HTML代码：

接下来是CSS代码：

纯CSS3实现牛奶般剔透的3D按钮特效相关推荐

最新文章

热门文章