< (5) css3 스위치 버튼 만들기 >


<!DOCTYPE HTML>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:800);
*,
*:before,
*:after {
  box-sizing: border-box;
}
body {
  background-color: #1c1d1f;
}
.btn_switch {
  display: block;
  width: 200px;
  height: 230px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background-color: #000000;
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.2) inset;
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.btn_switch span {
  display: block;
  position: absolute;
  left:3px;
  width: 194px;
  height: 108px;
  background-color: #1c1d1f;
  -webkit-transition: box-shadow 300ms ease, -webkit-transform 300ms ease;
  transition: box-shadow 300ms ease, -webkit-transform 300ms ease;
  transition: transform 300ms ease, box-shadow 300ms ease;
  transition: transform 300ms ease, box-shadow 300ms ease, -webkit-transform 300ms ease;
}
.btn_switch span:before {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-family: "Open Sans";
  font-weight: 800;
  font-size: 48px;
  -webkit-transition: text-shadow 300ms ease 100ms, color 300ms ease 100ms;
  transition: text-shadow 300ms ease 100ms, color 300ms ease 100ms;
}
.btn_switch span:after {
  content: "";
  width: 194px;
  height: 4px;
  position: absolute;
  background: -webkit-radial-gradient(center ellipse, rgba(255, 255, 255, 0.5) 0%, transparent 50%);
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.5) 0%, transparent 50%);
  -webkit-transition: opacity 300ms ease;
  transition: opacity 300ms ease;
}
.btn_switch .up{
  top: 6px;
  border-top-right-radius: 18px;
  border-top-left-radius: 18px;
  -webkit-transform-style: preserve3d;
          transform-style: preserve3d;
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
  -webkit-transform: perspective(2000px) rotateX(40deg);
          transform: perspective(2000px) rotateX(40deg);
  box-shadow:
  -1px 0 1px rgba(255, 255, 255, 0.1) inset,
   4px 0 8px rgba(255, 255, 255, 0.1) inset,
    1px 0 0 rgba(255, 255, 255, 0.1) inset,
    0px -12px 20px rgba(40, 42, 44, 0.9),
     0px -25px 16px rgba(28, 29, 31, 0.7),
      -1px -36px 49px rgba(28, 29, 31, 0.4)
}
.btn_switch .up:before {
  content: "ON";
  color: rgba(0, 0, 0, 0.5);
  text-shadow: 1px 4px 6px #1c1d1f, 0 0 0 black, 1px 4px 6px #1c1d1f;
}
.btn_switch .up:after {
  top: -1px;
}
.btn_switch .down {
  bottom: 6px;
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
  -webkit-transform-origin: top center;
          transform-origin: top center;
  box-shadow: -1px 1px 1px rgba(255, 255, 255, 0.1) inset, 2px 0 2px rgba(255, 255, 255, 0.05) inset;
}
.btn_switch .down:before {
  content: "OFF";
  color: #ff4847;
  text-shadow: 0 0 24px rgba(255, 72, 71, 0.6);
}
.btn_switch .down:after {
  bottom: -1px;
  opacity: 0;
}
.btn_switch .up.on {
  -webkit-transform: none;
          transform: none;
  box-shadow: 1px 1px 1px rgba(255, 255, 255, 0.1) inset, -2px 0 2px rgba(255, 255, 255, 0.05) inset;
}
.btn_switch .up.on:before {
  color: #93c913;
  text-shadow: 0 0 24px rgba(147, 201, 19, 0.6);
}
.btn_switch .up.on:after {
  opacity: 0;
}
.btn_switch .down.on{
  -webkit-transform: perspective(2000px) rotateX(-40deg);
          transform: perspective(2000px) rotateX(-40deg);
  box-shadow: 1px 0 1px rgba(255, 255, 255, 0.1) inset, 
 -4px 0 8px rgba(255, 255, 255, 0.1) inset,
 -1px 0 0 rgba(255, 255, 255, 0.1) inset,
 0px 12px 20px rgba(40, 42, 44, 0.9),
 0px 25px 16px rgba(28, 29, 31, 0.7),
 -1px 36px 49px rgba(28, 29, 31, 0.4)
}
.btn_switch .down.on:before {
  color: rgba(0, 0, 0, 0.5);
  text-shadow: 1px 4px 6px #1c1d1f, 0 0 0 #000000, 1px 4px 6px #1c1d1f;
}
.btn_switch .down.on:after {
  opacity: 1;
}

    </style>
    <script  src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
        $(document).ready(function(){
            var status = true;
            var $btnSwitch = $('.btn_switch');
            var $span = $('.btn_switch span');

            $btnSwitch.on('click', function(e){

               if(status){
                    $('.btn_switch span').toggleClass('on');
                    status = false;
                    console.log(status)
                };

                $span.one('transitionend', function(){
                    status = true;
                    console.log(status)
                });
            });

        });
    </script>
</head>
<body>
<!--     <label class="button">
        <span class="up"></span>
        <span class="down on"></span>
    </label>
 -->
    <label class="btn_switch">
        <span class="up"></span>
        <span class="down"></span>
    </label>



<script>



</script>
</body>
</html>

결과 화면 ) 




























저작자표시 비영리 동일조건

'CODING TIP > CSS' 카테고리의 다른 글

(4) 일정 영역 가로스크롤 만들기  (0) 2018.02.07
(3) 한줄 말줄임, 두줄 말줄임 등등  (0) 2018.01.23
(2) CSS 선택자 정리  (0) 2018.01.22
(1) css 가상요소 :after, :before를 통해 추가된 컨텐츠 내용에 줄바꿈하기  (0) 2018.01.17

+ Recent posts

티스토리툴바