zoukankan html css js c++ java

纯CSS3按钮变换效果

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>纯CSS3按钮效果</title>
    <style>
        *{
            margin:0; padding:0;
        }
        html,body{
            height:100%;background-color:#c1ebff;
        }
        body{
            text-align:center;
        }
        body:before{                /*按钮垂直居中*/
            content:'';display: inline-block;height:100%;vertical-align: middle;
        }
        button{
            height:60px;padding:0 2em;background-color: #1aab8a;color:#fff;border:none;outline:none;
            font-size: 1.6em;cursor:pointer;position: relative; transition:all ease 800ms;
        }
        button:hover{
            background-color: #fff;color:#1aab8a;
        }
        button:before,button:after{
            content:'';
            position: absolute;top:0;right:0;width:0;height:2px;background-color: #1aab8a;
            transition:all ease 400ms;
        }
        button:after{
            top:inherit;right:inherit;left:0;bottom:0;
        }
        button:hover:after,button:hover:before{
            width:100%;
            transition:all ease 800ms;
        }
    </style>
</head>
<body>
    <button>Hover me ! </button>
</body>
</html>

查看全文

相关阅读:
与字符串相关的操作 -- lua语言实现（带有浓厚的 lua 语法特性）
03-BFC
11-canvas
JavaScript知识点思维导图
 文件系统函数
 Meta标签大全
 PHP 快速排序
 天气预报API开发
 Zend Studio XDebug调试配置
 启程

原文地址：https://www.cnblogs.com/cuihuale/p/6477787.html