button.点击效果

1、

　　1.1、ZC：知识点：

　　　　(1)、css ":active"选择器　　　　　　　　　　　　（http://www.w3school.com.cn/cssref/selector_active.asp）

　　　　(2)、css box-shadow的使用（0px 0px 50px #F60 inset）　　　　（http://www.w3school.com.cn/cssref/pr_box-shadow.asp）

　　1.2、代码：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>button点击效果</title>

    <style type="text/css">
    <!--

        .clicked    { box-shadow: 0px 0px 50px #F60 inset; color:#fff; }
        #btn :active{ box-shadow: 0px 0px 50px #F60 inset; color:#fff; }

    -->
    </style>

</head>
<body>

    <input id="btn" type="button" value="button(1)"  />
    <br/><br/>
    <input type="button" onclick="this.className = this.className=='clicked' ? '' : 'clicked'" value="button(2)" />

</body>
</html>

 

2、

3、

4、

5、

 

posted @ 2018-03-20 13:25  Html5Skill  阅读(8232)  评论(0)  编辑  收藏  举报