用CSS3/JS繪制自己想要的按鈕

我認為按鈕的繪制分以下三個步驟

• 第一步，繪制按鈕的輪廓
  • 選擇合適的html標簽，設置輪廓的CSS

/* html代碼 */ <a href="#" class="button off"></a> body{ background-color: #E6C9B6; } /* CSS樣式 */ /* 按鈕輪廓 */ .button{ display: block; margin:100px auto; position: relative; width:100px; height:40px; border-radius: 50px; border:1px solid #fff; background-color: #E9E4E0; }

效果圖

仿IOS-1.jpg

• 第二步，繪制按鈕的默認狀態
  • 這一步很重要，由於我們不會再給html文件添加其他的標簽，所以我們需要用 :after 偽類對按鈕進行CSS渲染

    /* 接在上面繼續寫 */ .button:after{ display: block; position: absolute; //相對按鈕的輪廓進行決定定位 top:2px; bottom: 2px; //即設置top,又設置bottom使元素自動拉伸到最大 left:2px; //實際上，按鈕的寬度即為容器的高度-(top+bottom) width:36px; //按鈕的寬度 line-height: 36px; //按鈕文字的高度，如果不需要文字，可移除 text-align: center; text-transform: uppercase; font-size: 16px; background-color: #fff; //這里的背景顏色是按鈕的背景顏色 border:2px solid; transition: all 500ms; //按鈕的動畫時長 }

    實際上，做到這一步之后會發現，在瀏覽器上的效果沒有一點變化，還是之前的那樣子，不過不用着急，我們再加一點東西就很明顯了

  • 在輪廓內添加小按鈕

    .off:after { content: 'off'; border-radius:30px; color: #999; }

    默認為off狀態

仿IOS-2.jpg

- 再接着繪制要切換的狀態

.on:after { content: 'ON'; border-radius:30px; transform: translate(56px, 0); color:transparent; background-color:#4BD429; }

仿IOS-3.jpg

• 最后一步，寫JS代碼進行切換

  實際上，在CSS的切換之中，toggleClass是最為方便的。
  但是！！！
  這種切換方法不能切換你要觸發的JS事件，
  畢竟，我們畫按鈕是為了完成某些功能，
  所以我采用的是這種方式,但也許並不是最好的

  var zn=0; $('.button').click(function(e){ if(zn==1){ $(this).removeClass("on").addClass("off"); //此處可填要觸發的事件 zn=0; }else{ $(this).removeClass("off").addClass("on"); //此處可填要觸發的事件 zn=1; } });

  到此，一個完整的開關按鈕就繪制完成了
  感謝你能花3~5分鍾的時間閱覽我不專業的教程

PS:昨天要繪制一個按鈕控制燈泡的開關（實際上就是切換背景圖片），然后我四周一看，看到了牆壁上的一個公牛開關，既然是控制電燈的，我就想玩一玩仿真開關，忍着中午的睡意，還真勉強的給繪制出來了

  繪制過程並不復雜，我也就不細說了，貼下效果圖和代碼，感興趣的可以自行看一下

仿真開關.jpg

仿真-2.jpg

PS:我引用了一個初始化的CSS文件，可能需要
box-sizing:border-box;

<style type="text/css"> /*開關的輪廓*/ .button{ display: block; position: relative; width:160px; height:180px; border-radius: 5px; background-color: #f1f1f1; } .button2{ display: block; position: relative; width:160px; height:180px; border-radius: 5px; background-color: #f1f1f1; } /*指示燈*/ .indicate{ display: block; position: absolute; margin:60px 0 0 70px; width: 20px; height: 4px; border-radius: 2px; background-color: #A8C1C2; z-index: 1; transition: all 200ms; } .indicate_yes{ margin:69px 0 0 70px; background-color: #A3D7E7; } /*開關內部的小按鈕*/ .button:after{ display: block; position: absolute; top:40px; bottom: 40px; left:20px; right:20px; line-height: 52px; border:1px solid #FFF; transition: all 200ms; } .button2:after{ display: block; position: absolute; top:49px; bottom: 31px; left:20px; right:20px; line-height: 52px; border:1px solid #FFF; transition: all 200ms; } /*默認狀態的小按鈕*/ .on:after { content: ''; border-radius: 5px; /* CSS3的顏色漸變凸顯按鈕的凸出感 */ background: linear-gradient(#fff, #f2f2f2 80%,#fff); /* CSS3的影音的綜合應用，繪制按鈕的邊緣，給予立體感 */ box-shadow: 0 1px 0 0 #fff, 0 3px 0.5px 0 #E7E9EA, 0 5px 0.5px 0 #DEDFDF, 0 6px 0.5px 0 #CCCCCD, 0 7px 0.5px 0 #C5C7C7, 0 8px 2px 0 #818283, 0 9px 2px 0 #A7A8A8; } /*關閉后的小按鈕*/ .off:after { content: ''; border-radius: 5px; background: linear-gradient(#fff, #f2f2f2 80%,#fff); box-shadow: 0 -1px 0 0 #fff, 0 -3px 0.5px 0 #E7E9EA, 0 -5px 0.5px 0 #DEDFDF, 0 -6px 0.5px 0 #CCCCCD, 0 -7px 0.5px 0 #C5C7C7, 0 -8px 2px 0 #818283, 0 -9px 2px 0 #A7A8A8; } </style> /* JS代碼 */ <script type="text/javascript"> $('.button').click(function(e) { var toggle = this; e.preventDefault(); $(toggle).toggleClass('on') .toggleClass('off') .toggleClass("button2"); //指示燈亮/滅 $(this).children(".indicate") .toggleClass("indicate_yes"); }); //localStorage.clear(); </script>

學習過程中遇到什么問題或者想獲取學習資源的話，歡迎加入學習交流群
343599877，我們一起學前端！