按钮效果 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适配器 I2C driver 某个I2C设备的设备驱动,可以以driver理解. I2C client 某个I2C ...
- javascrip中array使用(续)
ECMAScript 5中的数组的方法 Ecmascript5定义了9个新的数组方法遍历,映射,过滤,检测,简化和搜索数组. 1.forEach() Array.orEach()方法从头到尾遍历数组, ...
- windows上zend server安装 报The server encountered an internal error or misconfiguration and was unable to complete your request -解决方法 摘自网络
windows上zend server安装完成后报如下错误: Internal Server Error The server encountered an internal error or m ...
- sql server 查看表结构说明
select c.name as [字段名],t.name as [字段类型] ,convert(bit,c.IsNullable) as [可否为空] ,convert(bit,case when ...
- (转)tar 解压缩命令
tar -c: 建立压缩档案-x:解压-t:查看内容-r:向压缩归档文件末尾追加文件-u:更新原压缩包中的文件 这五个是独立的命令,压缩解压都要用到其中一个,可以和别的命令连用但只能用其中一个.下面的 ...
- 关于RGB转换YUV的探讨与实现
最近在Android手机上使用相机识别条形码工作取得了比较理想的进展,自动识别功能基本完成,然而在手动识别指定条形码图片时遇到困难,由于Zxing开源Jar包识别图片的颜色编码式为YUV,而普通的图片 ...
- uva 11195 Another queen (用状态压缩解决N后问题)
题目链接:http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...
- [Ionic] Ionic Quickstart for Windows
1. Install ionic 2. Create ionic app ionic start myApp tabs //create a app cd myApp ionic serve // o ...
- flex利用webservice上传照片
WebService端代码 /// <summary> /// 上传文件到远程server /// </summary> /// <param name="fi ...
- 注释驱动的 Spring cache 缓存介绍--转载
概述 Spring 3.1 引入了激动人心的基于注释(annotation)的缓存(cache)技术,它本质上不是一个具体的缓存实现方案(例如 EHCache 或者 OSCache),而是一个对缓存使 ...