按钮效果 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...使用度娘糯米时(不是广告,不是广告,不是广告!),偶然注意到了它的首页中一个有意思的效果,就是那些“按钮”点击 ...
随机推荐
- Java 8 简明教程
欢迎阅读我编写的 Java 8 介绍.本教程将带领你一步步认识这门语言的所有新特性.通过简单明了的代码示例,你将会学习到如何使用默认接口方法,Lambda表达式,方法引用和可重复注解.在这篇教程的最后 ...
- Yii中用递归方法实现无限级分类
用递归方法实现多级分类,适合分级不太多的分类,如三到四级. 数据库结构: Model中(Category.php) /** * 获取全部分类信息 */ public function getAllca ...
- IT项目管理的六种错误思维
导读:在软件行业,在界面设计没有正式展现给客户之前,所有的工作都处于需求调研阶段.很多IT项目经理因为年轻,初生牛犊不怕虎,胆量大,勇气足,敢于在实践中引入新的工具.方法.敢于尝试不是坏事,但试验的风 ...
- Office在线预览及PDF在线预览的实现方式史上最全大集合
Office在线预览及PDF在线预览的实现方式大集合 一.服务器先转换为PDF,再转换为SWF,最后通过网页加载Flash预览 微软方:利用Office2007以上版本的一个PDF插件SaveAsPD ...
- 连接数据库超时设置autoReconnect=true
1,问题现象: com.mysql.jdbc.CommunicationsException: The last packet successfully received from the serve ...
- 硝烟中的Scrum和XP-我们如何实施Scrum 15)多团队 Part 2/2 16)地理分散 17)检查列表 18)其他
引入"团队领导"角色 假设有3个团队开发同一个产品 红色的P是PO, 黑色的S是SM, 蓝色是其他团队成员; 如何决定哪些人属于哪个团队? 怎么分配成员? 有人觉得让PO来做人员分 ...
- OpenFileDialog
打开一个文件 private void button1_Click(object sender, EventArgs e) { openFile ...
- 基于事件的 NIO 多线程服务器--转载
JDK1.4 的 NIO 有效解决了原有流式 IO 存在的线程开销的问题,在 NIO 中使用多线程,主要目的已不是为了应对每个客户端请求而分配独立的服务线程,而是通过多线程充分使用用多个 CPU 的处 ...
- android之tween动画详解
android中一共提供了两种动画,其一便是tween动画,tween动画通过对view的内容进行一系列的图像变换(包括平移,缩放,旋转,改变透明度)来实现动画效果,动画效果的定义可以使用xml,也可 ...
- C# 引用SHDocVw 实现模拟网页操作
因为最近项目需要,所以接触到了网页爬取. 1. HttpWebRequest 初期接触的都是一些比较简单的网页,通过Fiddler抓包分析后,就能模拟进行http请求,进行想要的操作. 2. WebB ...