❏ css - on/off 버튼 만들기!

오늘은 css로만 만들 수 있는 다양한 버튼들을 가져왔습니다!

 

매번 공부하면서 만들어보고 있습니다!

 

정말 공부하면서 느끼는 거지만 진짜 고수분들이 많으신 것 같네요..!

 

다시 한번 더 열심히 공부해야겠다는 생각이 듭니다! ദ്ദി '֊' )

 

---

1. 라운드형

 

라운드형

 

<!-- 라운드형 스위치  -->
<div>
<h2>Round</h2>
	<span class="switch">
		<input id="switch-round" type="checkbox" />
		<label for="switch-round"></label>
	</span>
 </div>

.switch{
    display: inline-block;
}

.switch input{
    display: none;
}

.switch label{
    display: block;
    width: 60px;
    height: 30px;
    padding: 4px;
    border-radius: 15px;
    background: #c1c1d4;
    transition: 0.3s;
}

.switch label::after{
    content: "";
    display: inherit;
    width: 20px;
    height: 20px;
    border-radius: 12px;
    background: #fff;
    transition: 0.3s;
}

.switch input:checked ~ label{
    background: #2b87ea;
}

.switch input:checked ~ label::after {
    translate: 30px 0;
    background: #ffffff;
}

 

 

2. 각진형 

 

각진형

<!-- 각진 스위치 -->
<div>
<h2>Square</h2>
      <span class="switch square">
           <input id="switch-square" type="checkbox" />
           <label for="switch-square"></label>
      </span>
</div>

.switch{
    display: inline-block;
}

.switch input{
    display: none;
}

.switch label{
    display: block;
    width: 60px;
    height: 30px;
    padding: 4px;
    border-radius: 1px;
    background: #c1c1d4;
    transition: 0.3s;
}

.switch label::after{
    content: "";
    display: inherit;
    width: 20px;
    height: 20px;
    border-radius: 1px;
    background: #fff;
    transition: 0.3s;
}

.switch input:checked ~ label{
    background: #2b87ea;
}

.switch input:checked ~ label::after {
    translate: 30px 0;
    background: #ffffff;
}

 

 

3. 선택 불가형

 

선택 불가형

 

<!-- 선택 불가형 -->
<h2>Disabled</h2>
    <span class="switch">
        <input disabled id="switch-disabled" type="checkbox" />
        <label for="switch-disabled"></label>
    </span>

.switch{
    display: inline-block;
}

.switch input{
    display: none;
}

.switch label{
    display: block;
    width: 60px;
    height: 30px;
    padding: 4px;
    border-radius: 15px;
    background: #c1c1d4;
    transition: 0.3s;
}

.switch label::after{
    content: "";
    display: inherit;
    width: 20px;
    height: 20px;
    border-radius: 12px;
    background: #fff;
    transition: 0.3s;
}

.switch input:checked ~ label{
    background: #2b87ea;
}

.switch input:checked ~ label::after {
    translate: 30px 0;
    background: #ffffff;
}

.switch input:disabled ~ label{
    opacity: 0.35;
    cursor: not-allowed;
}

---

오늘도 내일도 열심히 해야겠네요..!

＿〆(。╹‿ ╹。)