<!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的更多相关文章

  1. 纯CSS实现3D按钮效果

    今天分享一个用纯CSS实现的3D按钮.css巧妙利用了box-shadow来实现3D物体的立体感,当按钮按下的时候再去修改box-shadow和top值.让人感觉有一种按钮被按下的感觉.css代码非常 ...

  2. 仿淘宝分页按钮效果简单美观易使用的JS分页控件

    分页按钮思想:  1.少于9页,全部显示  2.大于9页,1.2页显示,中间页码当前页为中心,前后各留两个页码  附件中有完整例子的压缩包下载.已更新到最新版本  先看效果图:  01输入框焦点效果  ...

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

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

  4. 10个实用的 CSS3 按钮效果制作教程

    人们往往喜欢那些有更多互动元素的网站,因此现在很多设计师专注于他们的 CSS3 技能.这是因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力.这里分享的10个优秀的 CSS3 按钮效果制作 ...

  5. 学习制作精美 CSS3 按钮效果的10个优秀教程

    由于互联网世界正在发生变化,人们往往喜欢那些有更多互动元素的网站,因此现在很多 Web 开发人员也在专注于提高他们的 CSS3 技能,因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力.这 ...

  6. 【Web】block、inline、inline-block元素与background属性概述(案例实现社交账号注册按钮效果)

    步骤三:社交账号注册按钮效果 文章目录 步骤三:社交账号注册按钮效果 案例的演示与分析 CSS属性与HTML标签 块级元素 内联元素 行内块级元素 CSS的display属性 CSS中的背景图片属性 ...

  7. 爱心跳动效果 CSS实现

    爱心跳动效果 CSS实现 实现效果 砰砰砰 实现原理 通过动画改变每个元素的高度,从而实现每个元素高度变化的效果,为了使每个元素依次跳动,给每个元素添加一定的延时效果,使得从效果元素依次跳动 代码分析 ...

  8. 美妙的 CSS3 动画！一组梦幻般的按钮效果

    今天给大家带来的是五款梦幻般的动画按钮效果.下面是在线演示,把鼠标放在按钮上试试,有惊喜哦!CSS3 引入了众多供功能强大的新特性,让设计和开发人员能够轻松的创作出各种精美的界面效果. 温馨提示:为保 ...

  9. iOS （UIButton封装）仿糯米首页缩放“按钮”效果

    前言 过年期间,少不了各种聚会,当下聚会大多数情况下自然是团购,然后就是用各种APP...使用度娘糯米时(不是广告,不是广告,不是广告!),偶然注意到了它的首页中一个有意思的效果,就是那些“按钮”点击 ...

随机推荐

  1. 使用DNSAgent拦截特定域名

    开发程序时,为方便测试,需要把本来发往abc.com的数据发到本地. 最简单的方法是直接在程序中修改,把abc.com修改为需要的地址. 但这样提交代码时,容易把调试地址给提交到服务器. 或是嵌入式设 ...

  2. Ruby on Rails Session 1: How to Build a Ruby on Rails on the Ubuntu.

    About Ruby on Rails Ruby on Rails is an application stack that provides developers with a framework ...

  3. 字符编码笔记：ASCII，Unicode和UTF-8，附带 Little endian和Big endian的解释

    作者: 阮一峰 日期: 2007年10月28日 今天中午,我突然想搞清楚Unicode和UTF-8之间的关系,于是就开始在网上查资料. 结果,这个问题比我想象的复杂,从午饭后一直看到晚上9点,才算初步 ...

  4. POJ 1325、ZOJ 1364、HDU 1150 Machine Schedule - from lanshui_Yang

    Problem Description As we all know, machine scheduling is a very classical problem in computer scien ...

  5. 3.3FactoryMethod——工厂方法

    意图: 定义一个用于创建对象的接口,让子类决定实例化哪一个类.FactoryMethod使一个类的实例化延迟到其子类. 其实在抽象工厂模式中,经过改进后的模式就是工厂方法模式,所以不多说了,上UML图 ...

  6. mysql通过查看跟踪日志跟踪执行的sql语句

    在SQL SERVER下跟踪sql采用事件探查器,而在mysql下如何跟踪sql呢? 其实方法很简单,开启mysql的日志log功能,通过查看跟踪日志即可. 开启mysql的日志log方法: wind ...

  7. [TypeScript] Loading Compiled TypeScript Files in Browser with SystemJS

    TypeScript outputs JavaScript, but what are you supposed to do with it? This lesson shows how to tak ...

  8. Java 加密 base64 encode

    版权声明:本文为博主原创文章,未经博主允许不得转载. [前言] 计算机中的数据都是二进制的,不管是字符串还是文件,而加密后的也是二进制的, 而我们要看到的往往是字符串,本文就介绍了将byte[]转为各 ...

  9. oracle9

    约束 维护数据的完整性 数据的完整性用于确保数据库数据遵从一定的商业和逻辑规则(比如年纪不能为-,性别不能为非男女),在oracle中,数据完整性可以使用约束.触发器.应用程序(过程.函数)三种方法来 ...

  10. labview 移位寄存器、隧道、索引隧道的区别

    Lab view区别:移位寄存器.隧道.索引隧道 最近研究Lab view的时候发现移位寄存器和隧道的功能非常相似但是又有区别 外部数据进入循环体是通过隧道进入的,有几种方式: 图1:For 循环结构 ...