Checkbox by mobinkakei

1.btn-lock {
2  position: absolute;
3  top: calc(50% - 32px);
4  left: calc(50% - 32px);
5  display: inline-block;
6  background: #ff5b5b;
7  width: 64px;
8  height: 64px;
9  box-sizing: border-box;
10  padding: 12px 0 0 18px;
11  border-radius: 50%;
12  cursor: pointer;
13  -webkit-tap-highlight-color: transparent;
14}
15
16.btn-lock svg {
17  fill: none;
18  transform: translate3d(0, 0, 0);
19}
20
21.btn-lock svg .bling {
22  stroke: #fff;
23  stroke-width: 2.5;
24  stroke-linecap: round;
25  stroke-dasharray: 3;
26  stroke-dashoffset: 15;
27  transition: all 0.3s ease;
28}
29
30.btn-lock svg .lock {
31  stroke: #fff;
32  stroke-width: 4;
33  stroke-linejoin: round;
34  stroke-linecap: round;
35  stroke-dasharray: 36;
36  transition: all 0.4s ease;
37}
38
39.btn-lock svg .lockb {
40  fill: #fff;
41  fill-rule: evenodd;
42  clip-rule: evenodd;
43  transform: rotate(8deg);
44  transform-origin: 14px 20px;
45  transition: all 0.2s ease;
46}
47
48#inpLock {
49  display: none;
50}
51
52#inpLock:checked + label {
53  background: #20cca5;
54}
55
56#inpLock:checked + label svg {
57  opacity: 1;
58}
59
60#inpLock:checked + label svg .bling {
61  animation: bling6132 0.3s linear forwards;
62  animation-delay: 0.2s;
63}
64
65#inpLock:checked + label svg .lock {
66  stroke-dasharray: 48;
67  animation: locked 0.3s linear forwards;
68}
69
70#inpLock:checked + label svg .lockb {
71  transform: rotate(0);
72  transform-origin: 14px 22px;
73}
74
75@keyframes bling6132 {
76  50% {
77    stroke-dasharray: 3;
78    stroke-dashoffset: 12;
79  }
80
81  100% {
82    stroke-dasharray: 3;
83    stroke-dashoffset: 9;
84  }
85}
86
87@keyframes locked {
88  50% {
89    transform: translateY(1px);
90  }
91}
92