整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
通的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，確實很酷哦！
整理了16款css按鈕，經過全部測試，沒發現有影響使用的bug，其中也可能存在部分bug，但是應該問題不大。
代碼已上傳到網盤，獲取源碼請關注公眾號【青年碼農】回復【css按鈕】即可。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
