通的input[type=‘file’]的效果很朴素

可以自定义一个file选择文件的按钮：

思路为：用定位将自定义的按钮遮住原来的选择文件按钮，再让点击自定义按钮时触发原来的选择文件按钮的事件即可（对此，label可实现）

eg:html:

css样式：

结果图：

点击“选择图片”按钮，则会触发选择图片的事件，你就可以选择图片啦！

以上，是用bootstrap实现的，原生的如下：

html:

CSS:

效果图：

点一下，就可以弹出选择文件的文件夹啦！

示和隐藏图片

点击显示和隐藏按钮分别控制图片的显示和隐藏。

框架绘制，显示按钮、隐藏按钮、div标签：

<input type="button" value="显示" id="btn1">
<input type="button" value="隐藏" id="btn2">
<div id="box"></div>

添加样式：按钮居中，div设置宽高和背景图片，display:block; 代表显示图片；display:none; 代表显示图片。

<style>
    body{
        text-align: center;
    }

    input{
        margin: 10px;
    }

    #box{
        height: 400px;
        width: 500px;
        background: url(./images/001.jpg) no-repeat;
        background-size: cover;
        margin: auto;
        display: block;
    }
</style>

获取对象：

let btn1 = document.getElementById("btn1");
let btn2 = document.getElementById("btn2");
let box = document.getElementById("box");

当按钮点击切换显示状态：

console.log(box.style.display, typeof(box.style.display));
btn1.onclick = function(){
    box.style.display = "block";
}

btn2.onclick = function(){
    console.log(box.style.display, typeof(box.style.display));
    box.style.display = "none";
}

切换背景图像

按下UP向上跳跃：

按下DOWN落地：

天跟大家分享与CSS3按钮相关的特效展示案例，这些例子特效主要由CSS3编写出来，除了新鲜有创意之外，编写代码质量也很高，对于前端人员或设计师都有参考的价值，当然有的不是全CSS3编写的，部分是需要与JS代码结合使用才能发挥效果。

下面大家一起看看这些CSS按钮DEMO，确实很酷哦！

1.css按钮点击效果

2.css按钮提交动画

3.css按钮悬停动画

4.css订购按钮

5.css动画按钮

6.css黑白悬停按钮

7.css蓝色动画按钮

8.css立方体按钮

9.css鼠标悬填充效果

10.css鼠标悬停边框按钮

11.按钮悬停效果

12.纯css按钮动画

13.纯css动画按钮

14.纯css多彩按钮

15.垃圾桶按钮动画

16.文件压缩按钮动画

整理了16款css按钮，经过全部测试，没发现有影响使用的bug，其中也可能存在部分bug，但是应该问题不大。

代码已上传到网盘，获取源码请关注公众号【青年码农】回复【css按钮】即可。