<!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. 解决sublime联网失败，点击package control后没有反应

    在中国大陆有可能出现这种情况,这是因为国内不支持https访问引起的(再次吐槽万恶的GFW ). 这时只需要"preferences -> package settings -> ...

  2. AppiumLibrary

    Strategy Example Description identifier Click Element|identifier=my_element Matches by @id or @name ...

  3. noip 2015 提高组

    算是填个坑吧 , QwQ Day 1 第一题很水,就是考代码能力 ,直接贴代码. #include <iostream> #include <cstdlib> #include ...

  4. (4/18)重学Standford_iOS7开发_框架和带属性字符串_课程笔记

    第四课(干货课): (最近要复习考试,有点略跟不上节奏,这节课的内容还是比较重要的,仔细理解掌握对今后的编程会有很大影响) 本节课主要涉及到Foundation和UIKit框架,基本都是概念与API知 ...

  5. 硝烟中的Scrum和XP-我们如何实施Scrum 15)多团队 Part 2/2 16)地理分散 17)检查列表 18)其他

    引入"团队领导"角色 假设有3个团队开发同一个产品 红色的P是PO, 黑色的S是SM, 蓝色是其他团队成员; 如何决定哪些人属于哪个团队? 怎么分配成员? 有人觉得让PO来做人员分 ...

  6. PowerMock注解PowerMockIgnore的使用方法

    故事要从一个异常开始,某天我在开发一个加密.解密特性,算法使用的是3DES,样例代码如下. package org.jackie.study.powermock; import java.io.Uns ...

  7. SVN工具的使用 和在Eclipse中安装GPD插件：(多步审批流，因此选择使用工作流（JBPM）来实现)

    前言 重点解说SVN工具的还原版本号.   1.提交svn之前.要先更新文件.假设更新之后有版本号冲突的话.就线下解决掉冲突,在把该文件标记为已经解决冲突. 正文 使用SVN还原历史版本号 water ...

  8. 用C语言扩展Python的功能

    https://www.ibm.com/developerworks/cn/linux/l-pythc/

  9. [Labview资料] labview事件结构学习

      编程的主要目的是为了实现用户的某种功能,用户通过用鼠标.键盘.程序内部等触发某种程序动作,从而达到某种结果,这些操作都被称作为事件,LabVIEW中相应这些事件最常用的结构就是“事件结构”.事件结 ...

  10. View事件分发机制

    所谓的事件分发,其实就是对MotionEvent事件的分发过程,即当一个MotionEvent产生后,系统需要把这个事件传递给一个具体的View,而这个传递的过程就是分发过程. 点击事件的分发由3个方 ...