on/off 버튼
HTML 2016. 6. 2. 15:23<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style>
* {box-sizing:border-box}
.cmn-toggle {
position: absolute;
margin-left: -9999px;
visibility: hidden;
}
.cmn-toggle + label {
display: block;
position: relative;
cursor: pointer;
outline: none;
user-select: none;
}
input.cmn-toggle-round-flat + label {
padding: 2px;
width: 52px;
height: 21px;
background-color:#b3b3b3;
border-radius:13px;
transition: background 0.4s;
}
input.cmn-toggle-round-flat + label:after {
display: block;
position: absolute;
content: "";
}
input.cmn-toggle-round-flat + label:after {
top: 2px;
left: 2px;
bottom: 4px;
width: 17px;
height:17px;
background-color: #fff;
border-radius:50%;
transition: margin 0.4s, background 0.4s;
}
/*
input.cmn-toggle-round-flat + label:before {
top: 2px;
left: 2px;
bottom: 2px;
right: 2px;
background-color:#b3b3b3;
border-radius:50%;
transition: background 0.4s;
}
*/
input.cmn-toggle-round-flat:checked + label {
background-color: #f52969;
}
input.cmn-toggle-round-flat:checked + label:after {
margin-left: 32px;
background-color: #fff;
}
input.cmn-toggle + label span:after {font-size:13px; font-weight:500; color:#fff}
input.cmn-toggle + label span:after {display:block; content:"OFF"; position:absolute; top:1px; right:7px }
input.cmn-toggle:checked + label span:after {display:block; content:"ON"; position:absolute; top:1px; left:10px}
</style>
</head>
<body>
<div class="switch">
<input id="toggle" class="cmn-toggle cmn-toggle-round-flat" type="checkbox">
<label for="toggle"><span></span></label>
</div>
</body>
</html>
'HTML' 카테고리의 다른 글
| 반응형 웹디자인 참고 (0) | 2012.05.23 |
|---|---|
| 브라우저 창 늘림/줄임시 이미지/width값 밀림 현상 (1) | 2011.09.30 |
| dl, dt, dd 요소 (0) | 2011.07.08 |
| 비디오 (0) | 2011.05.12 |
| 펌] 폼(Form) 디자인 잘했다는 소리를 듣기 위한 방법론 (0) | 2011.03.09 |