1，中间圆点用到css3的gradient属性

2，运动用到css3的transition属性

3，需要写各个浏览器的兼容

代码如下

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>css3按钮</title>

 </head>

 <style type="text/css">

     .btn{

         width: 100px;

         height: 30px;

         background: orange;

         border-radius: 20px;

         position: relative;

     }

     .btn input{

         width:100%;

         height: 100%;

         opacity: 0;

         cursor: pointer;

     }

     .btn label{

         display: block;

         width: 20px;

         height: 20px;

         background: -webkit-linear-gradient(top,#fff,#ccc);

         background: -moz-linear-gradient(top,#fff,#ccc);

         background: -ms-linear-gradient(top,#fff,#ccc);

         background: -o-linear-gradient(top,#fff,#ccc);

         position: absolute;

         left: 10px;

         top:5px;

         -webkit-transition:all .2s linear;

         -moz-transition:all .2s linear;

         -ms-transition:all .2s linear;

         -o-transition:all .2s linear;

         transition:all .2s linear;

         cursor: pointer;

         border-radius: 50%;

     }

     .btn input:checked+label{

         left: 70px;

     }

 </style>

 <body>

     <div class="btn">

         <input type="checkbox" id="forbtn">

         <label for="forbtn"></label>

     </div>

 </body>

 </html>
.btn input:checked+label表示在input选中的时候它后面的label标签定义样式。

css3制作滚动按钮的更多相关文章

  1. 详解用CSS3制作圆形滚动进度条动画效果

    主  题 今天手把手教大家用CSS3制作圆形滚动进度条动画,想不会都难!那么,到底是什么东东呢?先不急,之前我分享了一个css实现进度条效果的博客<CSS实现进度条和订单进度条>,但是呢, ...

  2. BonBon - 使用 CSS3 制作甜美的糖果按钮

    BonBon 是一组使用 CSS3 制作的甜美的糖果按钮样式.在过去,我们都是使用图片或者 JavaScript 来实现漂亮的按钮效果,随着越来越多的浏览器对 CSS3 的支持和完善,使用 CSS3 ...

  3. 使用 CSS3 制作一组超时尚的动画按钮效果

    通过 CSS3 的新特性,我们创作出好的交互和效果的可能性大大增加.这篇文章中,我想与大家分享一些 CSS3 动画按钮效果.我们的想法是创建一个具有不同风格的一些动画链接元素,鼠标悬停时有动画效果和活 ...

  4. 使用CSS3制作漂亮的按钮

    我给大家介绍一下如何使用CSS3来制作一个圆角阴影.渐变色的漂亮的按钮,它不需要任何图片和javascript脚本,只需要CSS3就可以轻松实现按钮效果,并且可以适用于任意HTML元素,想div,sp ...

  5. 图解CSS3制作圆环形进度条的实例教程

    圆环形进度条制作的基本思想还是画出基本的弧线图形,然后CSS3中我们可以控制其旋转来串联基本图形,制造出部分消失的效果,下面就来带大家学习图解CSS3制作圆环形进度条的实例教程 首先,当有人说你能不能 ...

  6. 9款精美别致的CSS3菜单和按钮

    1.超具立体感的CSS3 3D菜单 菜单项带小图标 记得之前向大家分享过不少CSS3 3D菜单,比如CSS3 3D动画菜单 3D立方体菜单项和HTML5/CSS3自定义下拉框 3D卡片折叠动画,效果都 ...

  7. 8个纯CSS3制作的动画应用及源码

    对于一个复杂的图形或者动画来说,之前我们的处理方式是图片叠加或者利用CSS+JavaScript的方法,然而随着CSS3标准的不断成熟,我们甚至完全可以利用CSS3来绘制一些图片和制作丰富的动画特效. ...

  8. CSS3制作分步注册表单

    这个DEMO是使用CSS3制作的一个分步注册表单,每个input对应的是每一步,在表单得到焦点时,对应的step也会进行对应的改变.不过这个效果是使用js代码来实现,但整个表单的外观是由CSS3来完成 ...

  9. Expression Design与Blend制作滚动的小球动画教程

    原文:Expression Design与Blend制作滚动的小球动画教程 一,开发工具 Microsoft Expression Design & Blend 4.0 (3.0亦可). 这两 ...

随机推荐

  1. 我的android学习经历20

    WebView的使用 WebView既可以和Intent一样实现界面跳转一样,让系统浏览器打开页面,也可以在应用程序中打开页面 注意用WebView时,需要注册网络服务 代码如下: package c ...

  2. BZOJ 3226: [Sdoi2008]校门外的区间

    题目链接:http://www.lydsy.com:808/JudgeOnline/problem.php?id=3226 题意:初始集合S为空.模拟四种集合操作:集合并.交.差.补集并. 思路:区间 ...

  3. Java-Eclipse插件开发学习笔记

    Eclipse插件 学习笔记 作者   Rick- Bao 开始日期  2014年8月26日 结束日期  2014年8月27日 一 . CVS(current version system) 版本控制 ...

  4. C#日志写入

    /// <summary> /// 写日志,指定日志文件 /// </summary> /// <param name="File"></ ...

  5. C#控制台->>四则运算

    用户需求: 要求编写一个0-10之间的整数进行四则运算,程序能接收输入的整数答案,并判断对错,程序结束时,统计出答对.答错的题目数量!并且0-10的整数是随机生成的,用户可以用键盘输入来选择四则运算中 ...

  6. 【CC评网】2013.第38周 要阅读 要有好工具

    要阅读,要有好工具 Reeder终于在ipad上推出了第二代版本,终于脱离了Google reader而独立存在: 自从Google reader关闭之后,我就在各种支持rss的阅读器中游荡,却总是找 ...

  7. hdu 5943 Kingdom of Obsession 二分图匹配+素数定理

    Kingdom of Obsession Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Oth ...

  8. 《Linux内核设计的艺术》学习笔记（二）INT 0x13中断

    参考资料: 1. <IBM-PC汇编语言程序设计> 2. http://blog.sina.com.cn/s/blog_5028978101008wk2.html 3. http://ww ...

  9. 表单美化-原生javascript和jQuery单选按钮（兼容IE6）

    最近很多人问怎么美化表单的元素,大家都知道表单元素在各个浏览器中的表现不一,反正也是特别的丑,那么问题就来了,我们能自己设计表单元素的外观么?答案是可以的,现在我们就来试试吧.我们用两种方式来实现这一 ...

  10. c++ ，类型转换

    一.隐式转换 1)精度低转高,sigend转unsigend2)数值0,会转为为指针. 数组名会转换为首地址.3)bool转换 .0为false.其他为true.-1也是true...4)非const ...