按钮效果 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>
按钮效果 css的更多相关文章
- 纯CSS实现3D按钮效果
今天分享一个用纯CSS实现的3D按钮.css巧妙利用了box-shadow来实现3D物体的立体感,当按钮按下的时候再去修改box-shadow和top值.让人感觉有一种按钮被按下的感觉.css代码非常 ...
- 仿淘宝分页按钮效果简单美观易使用的JS分页控件
分页按钮思想: 1.少于9页,全部显示 2.大于9页,1.2页显示,中间页码当前页为中心,前后各留两个页码 附件中有完整例子的压缩包下载.已更新到最新版本 先看效果图: 01输入框焦点效果 ...
- 使用 CSS3 制作一组超时尚的动画按钮效果
通过 CSS3 的新特性,我们创作出好的交互和效果的可能性大大增加.这篇文章中,我想与大家分享一些 CSS3 动画按钮效果.我们的想法是创建一个具有不同风格的一些动画链接元素,鼠标悬停时有动画效果和活 ...
- 10个实用的 CSS3 按钮效果制作教程
人们往往喜欢那些有更多互动元素的网站,因此现在很多设计师专注于他们的 CSS3 技能.这是因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力.这里分享的10个优秀的 CSS3 按钮效果制作 ...
- 学习制作精美 CSS3 按钮效果的10个优秀教程
由于互联网世界正在发生变化,人们往往喜欢那些有更多互动元素的网站,因此现在很多 Web 开发人员也在专注于提高他们的 CSS3 技能,因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力.这 ...
- 【Web】block、inline、inline-block元素与background属性概述(案例实现社交账号注册按钮效果)
步骤三:社交账号注册按钮效果 文章目录 步骤三:社交账号注册按钮效果 案例的演示与分析 CSS属性与HTML标签 块级元素 内联元素 行内块级元素 CSS的display属性 CSS中的背景图片属性 ...
- 爱心跳动效果 CSS实现
爱心跳动效果 CSS实现 实现效果 砰砰砰 实现原理 通过动画改变每个元素的高度,从而实现每个元素高度变化的效果,为了使每个元素依次跳动,给每个元素添加一定的延时效果,使得从效果元素依次跳动 代码分析 ...
- 美妙的 CSS3 动画！一组梦幻般的按钮效果
今天给大家带来的是五款梦幻般的动画按钮效果.下面是在线演示,把鼠标放在按钮上试试,有惊喜哦!CSS3 引入了众多供功能强大的新特性,让设计和开发人员能够轻松的创作出各种精美的界面效果. 温馨提示:为保 ...
- iOS （UIButton封装）仿糯米首页缩放“按钮”效果
前言 过年期间,少不了各种聚会,当下聚会大多数情况下自然是团购,然后就是用各种APP...使用度娘糯米时(不是广告,不是广告,不是广告!),偶然注意到了它的首页中一个有意思的效果,就是那些“按钮”点击 ...
随机推荐
- Linux I2C设备驱动编写（二）
在(一)中简述了Linux I2C子系统的三个主要成员i2c_adapter.i2c_driver.i2c_client.三者的关系也在上一节进行了描述.应该已经算是对Linux I2C子系统有了初步 ...
- 解popstar
游戏介绍 http://baike.baidu.com/view/9773832.htm 实现过程: 实现完整的游戏逻辑,包括消除,合并等,也就是实现一个完整的游戏功能. 找出每个连通的星星区域,每个 ...
- windows下mysql 控制台操作
windows mysql 控制台操作 1.首先打开cmd进入dos窗口 2.切换至目录: F: cd PHPnow-1.5.6\MySQL-5.0.90\bin 3.进入mysql: mysql - ...
- solr4.0.0学习（二） 数据库导入clob与blob为索引
导入clob很简单.但是blob好像没有提供方法,所以改了一下源码,重新编译替换class文件,竟然成功了. 先把配置文件贴上 SCHEMA.XML <?xml version="1. ...
- Visual Studio 2015安装过程卡住，解决办法
Visual Studio 2015安装过程中卡住的情况有很多,我遇到的是卡在安装windows 更新KB2999226,解决办法 手动安装此更新包,位置在Visual Studio的安装包中,目录: ...
- CAS协议 - CAS URIs
http://desert3.iteye.com/blog/1703449 2.CAS URIs: CAS是一个基于HTTP的协议,这就要求其每一个组成部分可以通过特定的URIs访问到.所有相关的U ...
- sql server和my sql 命令（语句）的差别，sql server与mysql的比較
sql与mysql的比較 1.连接字符串 sql :Initial Catalog(database)=x; --数据库名称 Data Source(source)=x; ...
- ubuntu下linux内核源码阅读工具和调试方法总结
http://blog.chinaunix.net/uid-20940095-id-66148.html 一 linux内核源码阅读工具 windows下当然首选source insight, 但是l ...
- HDU2054JAVA
(包括2016级新生)除了校赛,还有什么途径可以申请加入ACM校队? A == B ? Time Limit: 1000/1000 MS (Java/Others) Memory Limit: ...
- DNS服务器安装配置案例详解
案例配置要求:假设有一个域名:tianyik.com主机为:192.168.31.36 mail 192.168.31.37 www 192.168.31.38 pop --> ...