滑動開關切換按鈕﹍CSS 語法產生器

滑動開關切換按鈕﹍CSS 語法產生器

A+
on-off-flipswitch-css.jpg-滑動開關切換按鈕﹍CSS 語法產生器最簡單的切換選項效果,是使用 Input 元素的 radio 型態,也就是單選(非複選)的效果,長得像這樣:



之前接到一個需求,希望切換效果做得有質感,像是蘋果系統的切換按鈕,例如下面的範例:



原以為這樣的效果,需要用 JS 才能做出來,沒想到純 CSS 就能有很棒的效果,請見本篇的介紹。



一、Proto.io


Proto.io 是一個收費的網頁服務,不過也提供了一些免費的小工具,其中這個是本篇要介紹的 CSS 語法產生器,能做出各種美觀的滑動切換開關按鈕:



進入網頁後,馬上就有一個 DEMO 切換按鈕可以看效果,同時也提供了各種參數可以自訂:

on-off-flipswitch-css-1.jpg-滑動開關切換按鈕﹍CSS 語法產生器

  • Style: 這裡有四種樣式可以選擇,例如選 iOS10 的話,就是 iPhone 常見的開關效果
  • 其他不管是字體大小、各種底色等 CSS 設定,都可以自訂
  • 上方都會出現即時的預覽效果
  • 下方也會出現即時變更的 CSS、HTML 程式碼

調整出滿意的效果後,直接複製 HTML、CSS 就可在網頁上使用。



二、範例效果


以下提供一個範例,說明比較重要的修改之處。




程式碼:

<div class="center">
<div class="switch_demo">
<input type="checkbox" name="switch_demo" class="switch_demo-checkbox" id="switch_demo" checked>
<label class="switch_demo-label" for="switch_demo">
<span class="switch_demo-inner"></span>
<span class="switch_demo-switch"></span>
</label>
</div>
</div>
<style>
.switch_demo {
position: relative;
width: 150px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.switch_demo-checkbox {
display: none;
}
.switch_demo-label {
display: block;
overflow: hidden;
cursor: pointer;
border: 2px solid #999999;
border-radius: 20px;
}
.switch_demo-inner {
display: block;
width: 200%;
margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.switch_demo-inner:before,
.switch_demo-inner:after {
display: block;
float: left;
width: 50%;
height: 30px;
padding: 0;
line-height: 30px;
font-size: 14px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
box-sizing: border-box;
}
.switch_demo-inner:before {
content: "開啟";
padding-left: 10px;
background-color: #34A7C1;
color: #FFFFFF;
}
.switch_demo-inner:after {
content: "關閉";
padding-right: 10px;
background-color: #EEEEEE;
color: #999999;
text-align: right;
}
.switch_demo-switch {
display: block;
width: 18px;
margin: 6px;
background: #FFFFFF;
position: absolute;
top: 0;
bottom: 0;
right: 116px;
border: 2px solid #999999;
border-radius: 20px;
transition: all 0.3s ease-in 0s;
}
.switch_demo-checkbox:checked + .switch_demo-label .switch_demo-inner {
margin-left: 0;
}
.switch_demo-checkbox:checked + .switch_demo-label .switch_demo-switch {
right: 0px;
}
</style>

  • 紅字的地方,"開啟"、"關閉" 就是原本預設會顯示 "ON"、"OFF" 之處,可改為自訂字串。
  • 如果要修改整個開關的寬度,那麼直接改藍字這裡,版面效果會不如預期。最好直接從官網的項目 "Sizing" 這裡,直接調整寬度(width) 的值,再複製產生的 CSS 即可。



更多 CSS 相關文章:

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」。
◎ 非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP