44个创意&趣味拨动开关按钮示例

澳门威斯人登录按钮很棒 用户界面组件 提供在状态之间进行澳门威斯人登录的功能,例如暂停和播放,打开和关闭,活动和非活动。它允许用户在两​​个或多个状态之间更改设置。最常用的澳门威斯人登录按钮在首选项中用作“打开/关闭”按钮。所以这里有45个惊人而有趣的 拨动开关按钮 使用我在CodePen上找到的CSS和Javascript。

蛋澳门威斯人登录

你喜欢鸡蛋吗? Bodymovin和GreenSock的另一个迷你混搭。

纯CSSBat Sleep Toggle

纯CSSBat Sleep Toggle

性别澳门威斯人登录按钮

性别澳门威斯人登录按钮

摆设澳门威斯人登录

选择你的颜色!在带有GreenSock的ReactJS中使用SVG进行的摆设澳门威斯人登录。

日夜 Toggle

我正在休息一下以食物为基础的拨动开关!

温布尔登澳门威斯人登录

这是毫无意义的,但很痛苦,但是很有趣!

寿司澳门威斯人登录

三文鱼还是黄瓜?

灯泡拨动开关

一个自定义复选框,以拨动开关的形式显示灯泡的开/关状态

小猫咪拨动

通过制作成猫,改进了一个简单的复选框澳门威斯人登录。

复选框翘板拨动开关

一个HTML复选框表单元素,样式为跷板澳门威斯人登录开关。

快乐开关

快乐开关

复选框和视觉负担指标

取消选中,选中,禁用,启用。

输入/输出Codepen

您生活还是喜欢Codepen?

顽皮或尼斯澳门威斯人登录

顽皮或尼斯澳门威斯人登录

猎鹰澳门威斯人登录

跳到超空间启发的澳门威斯人登录

带复选框的拨动开关:已选中

的CSS中带有动画的圆形开关按钮已清理。

纯CSS“Day And Night” Toggle

看到Rappora拍摄的这张盘球,很喜欢它,希望看到它还活着。

拨动按钮/开关

日夜澳门威斯人登录按钮,弹性澳门威斯人登录按钮或通断开关。

主题澳门威斯人登录器

主题澳门威斯人登录器

SVG在CSS和Js中澳门威斯人登录(Greensock)

带有JS / GreenSock和CSS变体的动画SVG脸部澳门威斯人登录。选择你的口味。

玩具拨动开关

考虑到塑料外观,如果在Little Tikes产品上使用,拨动开关会是什么样子

怪异的总托格勒

一个带有“复选框”输入,一些CSS,伪元素和SVG过滤器的怪异的总澳门威斯人登录器。

Purecss的复选框动画

前端练习

可拖动的Skeuomorph开关– Toggle

可拖动的Skeuomorph开关

令人困惑的澳门威斯人登录按钮

使用HTML和CSS的令人困惑的澳门威斯人登录按钮/澳门威斯人登录开关

Sass轻松黑暗模式

Sass轻松黑暗模式

电灯拨动开关

只需在CSS(主要是CSS)中拨动一些电源开关即可!

纯CSSMinimal Toggle

仅使用CSS即可澳门威斯人登录。好好享受!

实际的纯CSS复选框滑块

Lotta人们使用JS进行文本更改,但是您不需要这样做。

狗狗扣

狗狗扣

复选框澳门威斯人登录动画

是复选框吗?它是拨动开关吗?是开关吗?

有趣的开关

有趣的开关-CSS复选框

开关

开关

开/关拨动开关

仅CSS动画复选框启用/禁用开关

的CSS翻转检查

的CSS翻转检查

Gooey拨动开关

Gooey复选框,仅CSS

无标题

无标题

纯CSSToggle Buttons

纯CSSToggle Buttons

开关

前两个设计有深度和照明

开关按钮

从运球澳门威斯人登录按钮编码仍然需要一些修复

纯CSSBulb 开关

简单的开关

液体按钮的实现

液体按钮的实现

纯CSSToggle Buttons

可以在网站上实际使用的澳门威斯人登录按钮/开关的集合。

吸血蝙蝠

动画的SVG蝙蝠,当您单击时就会变成吸血鬼!

发表评论

请客气。我们对此表示赞赏。您的电子邮件地址将不会被发布,并且必填字段已被标记

该网站使用Akismet减少垃圾邮件。 了解如何处理您的评论数据.