버튼을 클릭하면 해당 링크로 가도록 스타일로 링크를 줄 수 있나요?

버튼을 클릭하면 해당 링크로 가도록 스타일로 링크를 줄 수 있나요?

QA

버튼을 클릭하면 해당 링크로 가도록 스타일로 링크를 줄 수 있나요?

답변 1

본문

 


<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번 버튼을 누르면 다음으로 이동하도록 하려고 하는데

가상요소로 되어있어서 링크를 어떻게 줘야할 지 모르겠어요~

이 질문에 댓글 쓰기 :

답변 1

답변을 작성하시기 전에 로그인 해주세요.
전체 3
© SIRSOFT
현재 페이지 제일 처음으로