上集我們先介紹了類似電源開關的ON和OFF按鈕基本款程式碼,而看完了基本款的橫向與縱向美化型態,接下來聊聊幾種不同的變化型。
還沒看上集嗎?
直接點選下方網址回顧上集教學吧!
連結:純CSS將Radio button美化與開關型整理(上)
這裡整理了三種不同樣式的變化型,先從單純只有左右和顏色辨別ON和OFF的種類開始,到文字在操作鈕上的版本。
通常我們操作時,使用習慣是操作鈕靠左為OFF;靠右為ON,當然,最好還能透過顏色區分進行識別。
直接來看各版本的最終呈現樣貌及程式碼吧!
Table of Contents
Radio button變化型 – 無字大圓版
首先是無字大圓版本,先來看看最終結果會長這樣:
程式碼HTML如下:
<!-- HTML -->
<div class="cktoggle_bigbutton">
<input type="checkbox" class="cktoggle_bigbutton_checkbox" id="cktoggle_bigbutton_id" checked>
<label class="cktoggle_bigbutton_label" for="cktoggle_bigbutton_id">
<span class="cktoggle_bigbutton_inner"></span>
<span class="cktoggle_bigbutton_circle"></span>
</label>
</div>
接著是CSS的部分:
/* CSS */
/* ************************
大圓版本開始
************************ */
.cktoggle_bigbutton {
position: absolute;
width: 70px; /* 全按鈕寬度 */
top: 170px;
left: 50px;
}
/* 原按鈕樣式隱藏 */
.cktoggle_bigbutton_checkbox {
display: none;
}
/* 主外框 */
.cktoggle_bigbutton_label {
display: block;
overflow: hidden;
cursor: pointer;
/* border: 2px solid #156812; */
border-radius: 25px;
}
/* 背景 */
.cktoggle_bigbutton_inner {
display: block;
width: 200%; /* 左+右背景總寬度 */
margin-left: -100%; /* 左側及右側背景位置 一開始躲在左側100% */
transition: margin 0.3s ease-in 0s;
}
/* 背景 */
.cktoggle_bigbutton_inner:before, .cktoggle_bigbutton_inner:after {
display: block;
float: left;
width: 50%; /* before和after各佔50% */
height: 22px; /* 全按鈕高度 */
line-height: 42px; /* ON OFF文字高度 */
font-size: 16px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
box-sizing: border-box;
}
/* ON */
.cktoggle_bigbutton_inner:before {
content: "";
padding-left: 10px;
background-color: #7fd293;
color: #FFFFFF;
}
/* OFF */
.cktoggle_bigbutton_inner:after {
content: "";
padding-right: 10px;
background-color: #EEEEEE;
color: #999999;
text-align: right;
}
/* 上面的小圓 */
.cktoggle_bigbutton_circle {
display: block;
width: 26px; /* 小圓寬度 */
height: 26px; /* 小圓高度 */
margin: 0px; /* 小圓距離上下左右margin */
background-color: #10b736;
position: absolute;
top: -5px; /* 距離上邊緣 左右是和一開始的位置有關 */
right: 50px; /* uncheck時 小圓移動到離右側距離XXpx位置 */
border: 3px solid #2f8442; /* 小圓外框顏色 */
border-radius: 100px;
transition: all 0.3s ease-in 0s;
}
/* 當unchecked時,小圓顏色變換 */
.cktoggle_bigbutton_checkbox:not(:checked) + .cktoggle_bigbutton_label .cktoggle_bigbutton_circle {
background-color: #ececec;
border-color: #b7b7b7;
}
/* label和背景的移動 */
.cktoggle_bigbutton_checkbox:checked + .cktoggle_bigbutton_label .cktoggle_bigbutton_inner {
margin-left: 0;
}
/* label和上面小圓的移動 */
.cktoggle_bigbutton_checkbox:checked + .cktoggle_bigbutton_label .cktoggle_bigbutton_circle {
right: -10px;
}
/* ************************
大圓版本結束
************************ */
Radio button變化型 – 方形版
再來同樣是左右,但將整個外框製作成圓角方形,並將操作鈕做成類似反光效果。
最終結果會長這樣:
程式碼HTML如下:
<!-- HTML -->
<div class="cktoggle_square">
<input type="checkbox" class="cktoggle_square_checkbox" id="cktoggle_square_id" checked>
<label class="cktoggle_square_label" for="cktoggle_square_id">
<span class="cktoggle_square_inner"></span>
<span class="cktoggle_square_circle"></span>
</label>
</div>
CSS部分如下:
/* CSS */
/* ************************
方形版本開始
************************ */
.cktoggle_square {
position: absolute;
width: 120px; /* 全按鈕寬度 */
top: 280px;
left: 50px;
}
/* 原按鈕樣式隱藏 */
.cktoggle_square_checkbox {
display: none;
}
/* 主外框 */
.cktoggle_square_label {
display: block;
overflow: hidden;
cursor: pointer;
border: 3px solid #2d54ad;
border-radius: 8px;
transition: border 0.3s ease-in 0s;
}
/* 背景 */
.cktoggle_square_inner {
display: block;
width: 200%; /* 左+右背景總寬度 */
margin-left: -100%; /* 左側及右側背景位置 一開始躲在左側100% */
transition: margin 0.3s ease-in 0s;
}
/* 背景 */
.cktoggle_square_inner:before, .cktoggle_square_inner:after {
display: block;
float: left;
width: 50%; /* before和after各佔50% */
height: 42px; /* 全按鈕高度 */
line-height: 42px; /* ON OFF文字高度 */
font-size: 16px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
box-sizing: border-box;
}
/* ON */
.cktoggle_square_inner:before {
content: "ON";
padding-top: 2px;
padding-left: 10px;
background-color: #55a1ff;
background-image: linear-gradient(to bottom,#398bf1,#88bdff);
color: #FFFFFF;
}
/* OFF */
.cktoggle_square_inner:after {
content: "OFF";
padding-top: 2px;
padding-right: 10px;
background-color: #EEEEEE;
background-image: linear-gradient(to bottom,#cccccc,#EEEEEE);
color: #999999;
text-align: right;
}
/* 上面的小圓 */
.cktoggle_square_circle {
display: block;
overflow: hidden;
width: 48px; /* 小圓寬度 */
height: 42px; /* 小圓高度 */
margin: 0px; /* 小圓距離上下左右margin */
background-color: #f5f5f5;
position: absolute;
top: 0px; /* 距離上邊緣 左右是和一開始的位置有關 */
right: 66px; /* uncheck時 小圓移動到離右側距離XXpx位置 */
border: 3px solid #c1c1c1; /* 小圓外框顏色 */
border-radius: 8px;
transition: all 0.3s ease-in 0s;
}
/* 上面的小圓深色反光處 */
.cktoggle_square_circle::after {
content: "";
position: absolute;
top: 25px;
left: -15px;
width: 120px;
height: 80px;
background-color: #dedede;
transform: rotate(-30deg);
}
/* 當unchecked時,小圓顏色變換 */
.cktoggle_square_checkbox:not(:checked) + .cktoggle_square_label .cktoggle_square_circle {
background-color: #f5f5f5;
border-color: #b7b7b7;
}
/* 當unchecked時,外框顏色變換 */
.cktoggle_square_checkbox:not(:checked) + .cktoggle_square_label {
border-color: #8e8e8e;
}
/* label和背景的移動 */
.cktoggle_square_checkbox:checked + .cktoggle_square_label .cktoggle_square_inner {
margin-left: 0;
}
/* label和上面小圓的移動 */
.cktoggle_square_checkbox:checked + .cktoggle_square_label .cktoggle_square_circle {
right: 0px;
}
/* ************************
方形版本結束
************************ */
Radio button變化型 – 文字在上版
文字直接嵌入在操作鈕上,點擊時會切換ON和OFF不同文字。
顯示的結果會長這樣:
程式碼HTML如下:
<!-- HTML -->
<div class="cktoggle_textTop">
<input type="checkbox" class="cktoggle_textTop_checkbox" id="cktoggle_textTop_id" checked>
<label class="cktoggle_textTop_label" for="cktoggle_textTop_id">
<span class="cktoggle_textTop_inner"></span>
<span class="cktoggle_textTop_circle"></span>
</label>
</div>
CSS部分如下:
/* CSS */
/* ************************
文字在上版本開始
************************ */
.cktoggle_textTop {
position: absolute;
width: 320px; /* 全按鈕寬度 */
top: 410px;
left: 50px;
}
/* 原按鈕樣式隱藏 */
.cktoggle_textTop_checkbox {
display: none;
}
/* 主外框 */
.cktoggle_textTop_label {
display: block;
overflow: hidden;
cursor: pointer;
border-radius: 50px;
}
/* 背景 */
.cktoggle_textTop_inner {
display: block;
width: 200%; /* 左+右背景總寬度 */
margin-left: -100%; /* 左側及右側背景位置 一開始躲在左側100% */
transition: margin 0.3s ease-in 0s;
}
/* 背景 */
.cktoggle_textTop_inner:before, .cktoggle_textTop_inner:after {
display: block;
float: left;
width: 50%; /* before和after各佔50% */
height: 28px; /* 全按鈕高度 */
line-height: 42px; /* ON OFF文字高度 */
font-size: 16px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
box-sizing: border-box;
}
/* ON */
.cktoggle_textTop_inner:before {
content: "";
padding-left: 10px;
background-color: #51c159;
background-image: linear-gradient(to bottom,#51c159,#80dc7e);
color: #FFFFFF;
}
/* OFF */
.cktoggle_textTop_inner:after {
content: "";
padding-right: 10px;
background-color: #5c9bbf;
background-image: linear-gradient(to bottom,#5c9bbf,#8cc1ef);
color: #999999;
text-align: right;
}
/* 上面的小圓 */
.cktoggle_textTop_circle {
display: block;
overflow: hidden;
width: 220px; /* 小圓寬度 */
height: 22px; /* 小圓高度 */
margin: 0px; /* 小圓距離上下左右margin */
background-color: #f5f5f5;
position: absolute;
top: 0px; /* 距離上邊緣 左右是和一開始的位置有關 */
right: 95px; /* uncheck時 小圓移動到離右側距離XXpx位置 */
border: 3px solid #c1c1c1; /* 小圓外框顏色 */
border-radius: 50px;
text-align: center;
box-shadow: inset 0px 0px 15px 1px #afa7a7;
transition: all 0.3s ease-in 0s;
}
/* 直接在按鈕上增加文字 */
.cktoggle_textTop_circle::before {
content: "ON";
padding-top: 3px;
font-family: Trebuchet, Arial, sans-serif;
}
.cktoggle_textTop_circle::after {
content: "OFF";
padding-top: 3px;
font-family: Trebuchet, Arial, sans-serif;
}
/* 當切換的時候 上面的字隱藏/出現 */
.cktoggle_textTop_checkbox:checked + .cktoggle_textTop_label .cktoggle_textTop_circle::before {
display: block;
}
.cktoggle_textTop_checkbox:not(:checked) + .cktoggle_textTop_label .cktoggle_textTop_circle::before {
display: none;
}
.cktoggle_textTop_checkbox:checked + .cktoggle_textTop_label .cktoggle_textTop_circle::after {
display: none;
}
.cktoggle_textTop_checkbox:not(:checked) + .cktoggle_textTop_label .cktoggle_textTop_circle::after {
display: block;
}
/* 當unchecked時,小圓顏色變換 */
.cktoggle_textTop_checkbox:not(:checked) + .cktoggle_textTop_label .cktoggle_textTop_circle {
background-color: #f5f5f5;
border-color: #b7b7b7;
}
/* label和背景的移動 */
.cktoggle_textTop_checkbox:checked + .cktoggle_textTop_label .cktoggle_textTop_inner {
margin-left: 0;
}
/* label和上面小圓的移動 */
.cktoggle_textTop_checkbox:checked + .cktoggle_textTop_label .cktoggle_textTop_circle {
right: 0px;
}
/* ************************
文字在上版本結束
************************ */
總結
以上三種視覺上的變化型,讓你可以不再侷限於單一種按鈕樣式。
當然,最好是可以自己修改細節部分,讓你做出來的樣式可以最符合你的系統樣式噢!
希望透過以上的範例,運用純CSS教會大家開關型的Radio button美化與三種變化型囉!