通的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按鈕】即可。