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>

 

: