网站首页
网站导航
Ctrl+D收藏
首 页
代码段
源码包
文档库
工具箱
代码语言
.
CSharp
.
JS
Java
Asp.Net
C
MSSQL
PHP
Css
PLSQL
Python
Shell
EBS
ASP
Perl
ObjC
VB.Net
VBS
MYSQL
GO
Delphi
AS
DB2
Domino
Rails
ActionScript
Scala
代码分类
文件
系统
字符串
数据库
网络相关
图形/GUI
多媒体
算法
游戏
Jquery
Extjs
Android
HTML5
菜单
网页交互
WinForm
控件
企业应用
安全与加密
脚本/批处理
开放平台
其它
【
Css
】
按钮效果 css
作者:
沅铱
/ 发布于
2019/10/28
/
564
按钮效果 css
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .toggle > div { width: 100px; height: 40px; border-radius: 20px; background: #fff; position: relative; border: solid 2px #e6e6e6; transition: all ease-in-out 0.25s 0s; display: inline-block; } .toggle > div div { position: absolute; top: 0; left: 0; height: 40px; width: 40px; border-radius: 50%; box-shadow: 0 2px 7px rgba(0, 0, 0, 0.35), 0 1px 1px rgba(0, 0, 0, 0.15); transition: all ease-in-out 0.25s 0s; } .clearfix:after { clear: both; font-size: 0; height: 0; display: block; visibility: hidden; content: " "; line-height: 0 } .clearfix { zoom: 1 } /* for IE6 IE7 */ .toggle input:checked + .ss { background: #4cd964; border-color: #4cd964; } .toggle input:checked + .ss div { transform: translate3d(60px, 0, 0); background-color: #fff; } </style> </head> <body> <label class="toggle "> <input type="checkbox" checked style="display: none"> <div class="ss"> <div></div> </div> </label> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </body> </html>
评论列表
本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。
试试其它关键字
同语言下
.
前端PC-移动端CSS公共样式+HTML
.
手机端页面通用样式
.
H5页面通用头部设置
.
elect默认样式美化代码兼容移动端和pc端
.
按钮效果 css
.
唤醒app
.
放大效果
.
html5+css3实现上拉和下拉刷新
.
html上传图片后，在页面显示上传的图片
.
html5实现点击弹出图片
可能有用的
.
前端PC-移动端CSS公共样式+HTML
.
手机端页面通用样式
.
H5页面通用头部设置
.
elect默认样式美化代码兼容移动端和pc端
.
按钮效果 css
.
唤醒app
.
放大效果
.
html5+css3实现上拉和下拉刷新
.
html上传图片后，在页面显示上传的图片
.
html5实现点击弹出图片
沅铱
贡献的其它代码
(
9
)
.
按钮效果 css
.
根据用户名查询该用户的相关信息
.
/* 获取当前点击事件的Object对象 */
.
服务端口监控，发现服务挂掉进行重启
.
hive并行执行job
.
计算机进程管理工具，根据CPU结束相应进程
.
身份证验证
.
妙用0元素数组实现大小可变结构体
.
通用JSON操作类
地图
本站
我们
服务
版权
联系
回馈
博客