버튼을 클릭하면 해당 링크로 가도록 스타일로 링크를 줄 수 있나요?
본문
<div class="switch"><br />
<label class="switch__wrapper"><input type="checkbox" /></label>
<div> </div>
<label class="switch__wrapper"> </label></div>
<style>
.switch {position: absolute; top: 30px; left: 259px;}
.switch__wrapper { position: relative; display: inline-block; width: 200px; height: 56px; line-height: 27px; background: #ededed; border: 1px solid #dddddd; box-sizing: border-box; border-radius: 28px; margin: 0px 1em 0px 0px;}
.switch__wrapper input { display: none;}
.switch__wrapper input:checked + .switch__slider:before { transform: translateX(92px); background-color: #ff9800;}
.switch__wrapper input:checked ~ div:after { color: #ffffff; transition: color 0.3s ease 0s;}
.switch__wrapper input:checked ~ div:before { color: #919191; transition: color 0.3s ease 0s;}
.switch div::before { content: "1번버튼"; position: relative; z-index: 5; font-weight: 700; font-size: 15px; color: #ffffff; bottom: -14px; left: 23px; cursor: pointer; transition: color 0.3s ease 0s;}
.switch div::after { content: "2번버튼"; position: relative; z-index: 5; font-weight: 700; font-size: 15px; color: #919191; bottom: -14px; left: 64px; cursor: pointer; transition: color 0.3s ease 0s;}
.switch__slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; transition: 0.4s; border-radius: 34px;}
.switch__slider::before { position: absolute; content: ""; width: 108px; height: 56px; left: -1px; bottom: -1px; background-color: #2A3CF3; transition: all 0.4s ease 0s; border-radius: 28px;}
</style>
소스를 활용해서 만든건데
1번 버튼을 누르면 네이버로 이동
2번 버튼을 누르면 다음으로 이동하도록 하려고 하는데
가상요소로 되어있어서 링크를 어떻게 줘야할 지 모르겠어요~
