Radio by adamgiebl

This radio was created for futuristic-radio-buttons

Made by

@adamgiebl

Theme:

Dark

#skeuomorphism#realistic#neon#radio

#212121

262 views

CSSAdd prefixes

1.container {
2  display: flex;
3  position: relative;
4  gap: 4px;
5}
6
7.container input[type="radio"] {
8  position: absolute;
9  opacity: 0;
10  cursor: pointer;
11  height: 0;
12  width: 0;
13}
14
15.container input[type="radio"]:checked + .button {
16  opacity: 1;
17}
18
19.container input[type="radio"]:checked + .button .pop {
20  animation: fly-up 0.5s ease-in-out;
21}
22
23.button {
24  position: relative;
25  border: none;
26  background: transparent;
27  padding: 0;
28  cursor: pointer;
29  outline-offset: 4px;
30  transition: filter 250ms;
31  user-select: none;
32  touch-action: manipulation;
33  width: 50px;
34  border-radius: 30px;
35  height: 50px;
36  opacity: 0.4;
37  box-shadow: 0px 0px 40px -5px hsl(170deg 100% 40%);
38}
39
40.button .pop {
41  width: 22px;
42  height: 22px;
43  position: absolute;
44  display: block;
45  left: 50%;
46  z-index: -1;
47  transform: translate(-50%, 0);
48  top: 0;
49  opacity: 0.3;
50}
51
52@keyframes fly-up {
53  0% {
54    transform: translate(-50%, 0);
55  }
56
57  50% {
58    transform: translate(-50%, -40px);
59  }
60
61  100% {
62    transform: translate(-50%, 0);
63  }
64}
65
66.button .shadow {
67  position: absolute;
68  top: 0;
69  left: 0;
70  width: 100%;
71  height: 100%;
72  border-radius: 12px;
73  background: hsl(0deg 0% 0% / 0.25);
74  will-change: transform;
75  transform: translateY(2px);
76  transition: all
77    600ms
78    cubic-bezier(.3, .7, .4, 1);
79}
80
81.button .edge {
82  position: absolute;
83  top: 0;
84  left: 0;
85  width: 100%;
86  height: 100%;
87  border-radius: 12px;
88  background: linear-gradient(
89    to left,
90    hsl(170deg 100% 16%) 0%,
91    hsl(170deg 100% 32%) 8%,
92    hsl(170deg 100% 32%) 92%,
93    hsl(170deg 100% 16%) 100%
94  );
95}
96
97.button .front {
98  display: flex;
99  align-items: center;
100  justify-content: center;
101  position: relative;
102  width: 100%;
103  height: 100%;
104  border-radius: 12px;
105  font-size: 1.1rem;
106  color: white;
107  background: hsl(170deg 100% 50%);
108  will-change: transform;
109  transform: translateY(-4px);
110  box-shadow: inset 4px 4px 8px hsl(170deg 100% 30%), inset -4px -4px 8px hsl(170deg 100% 80%);
111  transition: all
112    600ms
113    cubic-bezier(.3, .7, .4, 1);
114}
115
116.button .front svg {
117  display: block;
118  color: hsl(170deg 100% 30%);
119  margin-right: 0;
120}
121
122.button:hover .front {
123  transform: translateY(-6px);
124  transition: transform
125  
126    250ms
127    cubic-bezier(.3, .7, .4, 1.5);
128}
129
130.button:active .front {
131  transform: translateY(-2px);
132  transition: transform 34ms;
133}
134
135.button:hover .shadow {
136  transform: translateY(4px);
137  transition: transform
138    250ms
139    cubic-bezier(.3, .7, .4, 1.5);
140}
141
142.button:active .shadow {
143  transform: translateY(1px);
144  transition: transform 34ms;
145}

.container {
  display: flex;
  position: relative;
  gap: 4px;
}

.container input[type="radio"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.container input[type="radio"]:checked + .button {
  opacity: 1;
}

.container input[type="radio"]:checked + .button .pop {
  animation: fly-up 0.5s ease-in-out;
}

.button {
  position: relative;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  outline-offset: 4px;
  transition: filter 250ms;
  user-select: none;
  touch-action: manipulation;
  width: 50px;
  border-radius: 30px;
  height: 50px;
  opacity: 0.4;
  box-shadow: 0px 0px 40px -5px hsl(170deg 100% 40%);
}

.button .pop {
  width: 22px;
  height: 22px;
  position: absolute;
  display: block;
  left: 50%;
  z-index: -1;
  transform: translate(-50%, 0);
  top: 0;
  opacity: 0.3;
}

@keyframes fly-up {
  0% {
    transform: translate(-50%, 0);
  }

  50% {
    transform: translate(-50%, -40px);
  }

  100% {
    transform: translate(-50%, 0);
  }
}

.button .shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: hsl(0deg 0% 0% / 0.25);
  will-change: transform;
  transform: translateY(2px);
  transition: all
    600ms
    cubic-bezier(.3, .7, .4, 1);
}

.button .edge {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: linear-gradient(
    to left,
    hsl(170deg 100% 16%) 0%,
    hsl(170deg 100% 32%) 8%,
    hsl(170deg 100% 32%) 92%,
    hsl(170deg 100% 16%) 100%
  );
}

.button .front {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  font-size: 1.1rem;
  color: white;
  background: hsl(170deg 100% 50%);
  will-change: transform;
  transform: translateY(-4px);
  box-shadow: inset 4px 4px 8px hsl(170deg 100% 30%), inset -4px -4px 8px hsl(170deg 100% 80%);
  transition: all
    600ms
    cubic-bezier(.3, .7, .4, 1);
}

.button .front svg {
  display: block;
  color: hsl(170deg 100% 30%);
  margin-right: 0;
}

.button:hover .front {
  transform: translateY(-6px);
  transition: transform
  
    250ms
    cubic-bezier(.3, .7, .4, 1.5);
}

.button:active .front {
  transform: translateY(-2px);
  transition: transform 34ms;
}

.button:hover .shadow {
  transform: translateY(4px);
  transition: transform
    250ms
    cubic-bezier(.3, .7, .4, 1.5);
}

.button:active .shadow {
  transform: translateY(1px);
  transition: transform 34ms;
}

HTML

1<div class="container">
2  <div class="line"></div>
3  <label class="label" for="alien">
4    <input id="alien" type="radio" name="future-is-here" checked="">
5    <div class="button">
6      <span class="shadow"></span>
7  <span class="edge"></span>
8  <span class="front text">
9    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"></path><path fill="currentColor" d="M12 2a8.5 8.5 0 0 1 8.5 8.5c0 6.5-5.5 12-8.5 12s-8.5-5.5-8.5-12A8.5 8.5 0 0 1 12 2zm0 2a6.5 6.5 0 0 0-6.5 6.5c0 4.794 4.165 10 6.5 10s6.5-5.206 6.5-10A6.5 6.5 0 0 0 12 4zm5.5 7c.16 0 .319.008.475.025a4.5 4.5 0 0 1-4.95 4.95A4.5 4.5 0 0 1 17.5 11zm-11 0a4.5 4.5 0 0 1 4.475 4.975 4.5 4.5 0 0 1-4.95-4.95C6.18 11.008 6.34 11 6.5 11z"></path></svg>
10  </span>
11  <svg class="pop" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"></path><path fill="currentColor" d="M12 2a8.5 8.5 0 0 1 8.5 8.5c0 6.5-5.5 12-8.5 12s-8.5-5.5-8.5-12A8.5 8.5 0 0 1 12 2zm0 2a6.5 6.5 0 0 0-6.5 6.5c0 4.794 4.165 10 6.5 10s6.5-5.206 6.5-10A6.5 6.5 0 0 0 12 4zm5.5 7c.16 0 .319.008.475.025a4.5 4.5 0 0 1-4.95 4.95A4.5 4.5 0 0 1 17.5 11zm-11 0a4.5 4.5 0 0 1 4.475 4.975 4.5 4.5 0 0 1-4.95-4.95C6.18 11.008 6.34 11 6.5 11z"></path></svg>
12    </div>
13  </label>
14  <label class="label" for="bear">
15    <input id="bear" type="radio" name="future-is-here">
16    <div class="button">
17      <span class="shadow"></span>
18  <span class="edge"></span>
19  <span class="front text">
20    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"></path><path fill="currentColor" d="M17.5 2a4.5 4.5 0 0 1 2.951 7.897c.355.967.549 2.013.549 3.103A9 9 0 1 1 3.55 9.897a4.5 4.5 0 1 1 6.791-5.744 9.05 9.05 0 0 1 3.32 0A4.494 4.494 0 0 1 17.5 2zm0 2c-.823 0-1.575.4-2.038 1.052l-.095.144-.718 1.176-1.355-.253a7.05 7.05 0 0 0-2.267-.052l-.316.052-1.356.255-.72-1.176A2.5 2.5 0 1 0 4.73 8.265l.131.123 1.041.904-.475 1.295A7 7 0 1 0 19 13c0-.716-.107-1.416-.314-2.083l-.112-.33-.475-1.295 1.04-.904A2.5 2.5 0 0 0 17.5 4zM10 13a2 2 0 1 0 4 0h2a4 4 0 1 1-8 0h2z"></path></svg>
21  </span>
22  <svg class="pop" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"></path><path fill="currentColor" d="M17.5 2a4.5 4.5 0 0 1 2.951 7.897c.355.967.549 2.013.549 3.103A9 9 0 1 1 3.55 9.897a4.5 4.5 0 1 1 6.791-5.744 9.05 9.05 0 0 1 3.32 0A4.494 4.494 0 0 1 17.5 2zm0 2c-.823 0-1.575.4-2.038 1.052l-.095.144-.718 1.176-1.355-.253a7.05 7.05 0 0 0-2.267-.052l-.316.052-1.356.255-.72-1.176A2.5 2.5 0 1 0 4.73 8.265l.131.123 1.041.904-.475 1.295A7 7 0 1 0 19 13c0-.716-.107-1.416-.314-2.083l-.112-.33-.475-1.295 1.04-.904A2.5 2.5 0 0 0 17.5 4zM10 13a2 2 0 1 0 4 0h2a4 4 0 1 1-8 0h2z"></path></svg>
23    </div>
24  </label>
25  <label class="label" for="mickey">
26    <input id="mickey" type="radio" name="future-is-here">
27    <div class="button">
28      <span class="shadow"></span>
29  <span class="edge"></span>
30  <span class="front text">
31    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"></path><path fill="currentColor" d="M18.5 2a4.5 4.5 0 0 1 .883 8.913l.011.027a8 8 0 0 1-7.145 11.056L12 22a8 8 0 0 1-7.382-11.088A4.499 4.499 0 0 1 5.5 2a4.5 4.5 0 0 1 4.493 4.254l.073-.019A8.018 8.018 0 0 1 12 6l.25.004a8 8 0 0 1 1.756.25A4.5 4.5 0 0 1 18.5 2zM12 8a6 6 0 1 0 0 12 6 6 0 0 0 0-12zM5.5 4a2.5 2.5 0 0 0 0 5l.164-.005.103-.01A8.044 8.044 0 0 1 7.594 7.32l.33-.206A2.5 2.5 0 0 0 5.5 4zm13 0a2.5 2.5 0 0 0-2.466 2.916l.043.2.028.016a8.04 8.04 0 0 1 2.128 1.852A2.5 2.5 0 1 0 18.5 4z"></path></svg>
32  </span>
33  <svg class="pop" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"></path><path fill="currentColor" d="M18.5 2a4.5 4.5 0 0 1 .883 8.913l.011.027a8 8 0 0 1-7.145 11.056L12 22a8 8 0 0 1-7.382-11.088A4.499 4.499 0 0 1 5.5 2a4.5 4.5 0 0 1 4.493 4.254l.073-.019A8.018 8.018 0 0 1 12 6l.25.004a8 8 0 0 1 1.756.25A4.5 4.5 0 0 1 18.5 2zM12 8a6 6 0 1 0 0 12 6 6 0 0 0 0-12zM5.5 4a2.5 2.5 0 0 0 0 5l.164-.005.103-.01A8.044 8.044 0 0 1 7.594 7.32l.33-.206A2.5 2.5 0 0 0 5.5 4zm13 0a2.5 2.5 0 0 0-2.466 2.916l.043.2.028.016a8.04 8.04 0 0 1 2.128 1.852A2.5 2.5 0 1 0 18.5 4z"></path></svg>
34    </div>
35  </label>
36</div>

<div class="container">
  <div class="line"></div>
  <label class="label" for="alien">
    <input id="alien" type="radio" name="future-is-here" checked="">
    <div class="button">
      <span class="shadow"></span>
  <span class="edge"></span>
  <span class="front text">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"></path><path fill="currentColor" d="M12 2a8.5 8.5 0 0 1 8.5 8.5c0 6.5-5.5 12-8.5 12s-8.5-5.5-8.5-12A8.5 8.5 0 0 1 12 2zm0 2a6.5 6.5 0 0 0-6.5 6.5c0 4.794 4.165 10 6.5 10s6.5-5.206 6.5-10A6.5 6.5 0 0 0 12 4zm5.5 7c.16 0 .319.008.475.025a4.5 4.5 0 0 1-4.95 4.95A4.5 4.5 0 0 1 17.5 11zm-11 0a4.5 4.5 0 0 1 4.475 4.975 4.5 4.5 0 0 1-4.95-4.95C6.18 11.008 6.34 11 6.5 11z"></path></svg>
  </span>
  <svg class="pop" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"></path><path fill="currentColor" d="M12 2a8.5 8.5 0 0 1 8.5 8.5c0 6.5-5.5 12-8.5 12s-8.5-5.5-8.5-12A8.5 8.5 0 0 1 12 2zm0 2a6.5 6.5 0 0 0-6.5 6.5c0 4.794 4.165 10 6.5 10s6.5-5.206 6.5-10A6.5 6.5 0 0 0 12 4zm5.5 7c.16 0 .319.008.475.025a4.5 4.5 0 0 1-4.95 4.95A4.5 4.5 0 0 1 17.5 11zm-11 0a4.5 4.5 0 0 1 4.475 4.975 4.5 4.5 0 0 1-4.95-4.95C6.18 11.008 6.34 11 6.5 11z"></path></svg>
    </div>
  </label>
  <label class="label" for="bear">
    <input id="bear" type="radio" name="future-is-here">
    <div class="button">
      <span class="shadow"></span>
  <span class="edge"></span>
  <span class="front text">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"></path><path fill="currentColor" d="M17.5 2a4.5 4.5 0 0 1 2.951 7.897c.355.967.549 2.013.549 3.103A9 9 0 1 1 3.55 9.897a4.5 4.5 0 1 1 6.791-5.744 9.05 9.05 0 0 1 3.32 0A4.494 4.494 0 0 1 17.5 2zm0 2c-.823 0-1.575.4-2.038 1.052l-.095.144-.718 1.176-1.355-.253a7.05 7.05 0 0 0-2.267-.052l-.316.052-1.356.255-.72-1.176A2.5 2.5 0 1 0 4.73 8.265l.131.123 1.041.904-.475 1.295A7 7 0 1 0 19 13c0-.716-.107-1.416-.314-2.083l-.112-.33-.475-1.295 1.04-.904A2.5 2.5 0 0 0 17.5 4zM10 13a2 2 0 1 0 4 0h2a4 4 0 1 1-8 0h2z"></path></svg>
  </span>
  <svg class="pop" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"></path><path fill="currentColor" d="M17.5 2a4.5 4.5 0 0 1 2.951 7.897c.355.967.549 2.013.549 3.103A9 9 0 1 1 3.55 9.897a4.5 4.5 0 1 1 6.791-5.744 9.05 9.05 0 0 1 3.32 0A4.494 4.494 0 0 1 17.5 2zm0 2c-.823 0-1.575.4-2.038 1.052l-.095.144-.718 1.176-1.355-.253a7.05 7.05 0 0 0-2.267-.052l-.316.052-1.356.255-.72-1.176A2.5 2.5 0 1 0 4.73 8.265l.131.123 1.041.904-.475 1.295A7 7 0 1 0 19 13c0-.716-.107-1.416-.314-2.083l-.112-.33-.475-1.295 1.04-.904A2.5 2.5 0 0 0 17.5 4zM10 13a2 2 0 1 0 4 0h2a4 4 0 1 1-8 0h2z"></path></svg>
    </div>
  </label>
  <label class="label" for="mickey">
    <input id="mickey" type="radio" name="future-is-here">
    <div class="button">
      <span class="shadow"></span>
  <span class="edge"></span>
  <span class="front text">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"></path><path fill="currentColor" d="M18.5 2a4.5 4.5 0 0 1 .883 8.913l.011.027a8 8 0 0 1-7.145 11.056L12 22a8 8 0 0 1-7.382-11.088A4.499 4.499 0 0 1 5.5 2a4.5 4.5 0 0 1 4.493 4.254l.073-.019A8.018 8.018 0 0 1 12 6l.25.004a8 8 0 0 1 1.756.25A4.5 4.5 0 0 1 18.5 2zM12 8a6 6 0 1 0 0 12 6 6 0 0 0 0-12zM5.5 4a2.5 2.5 0 0 0 0 5l.164-.005.103-.01A8.044 8.044 0 0 1 7.594 7.32l.33-.206A2.5 2.5 0 0 0 5.5 4zm13 0a2.5 2.5 0 0 0-2.466 2.916l.043.2.028.016a8.04 8.04 0 0 1 2.128 1.852A2.5 2.5 0 1 0 18.5 4z"></path></svg>
  </span>
  <svg class="pop" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"></path><path fill="currentColor" d="M18.5 2a4.5 4.5 0 0 1 .883 8.913l.011.027a8 8 0 0 1-7.145 11.056L12 22a8 8 0 0 1-7.382-11.088A4.499 4.499 0 0 1 5.5 2a4.5 4.5 0 0 1 4.493 4.254l.073-.019A8.018 8.018 0 0 1 12 6l.25.004a8 8 0 0 1 1.756.25A4.5 4.5 0 0 1 18.5 2zM12 8a6 6 0 1 0 0 12 6 6 0 0 0 0-12zM5.5 4a2.5 2.5 0 0 0 0 5l.164-.005.103-.01A8.044 8.044 0 0 1 7.594 7.32l.33-.206A2.5 2.5 0 0 0 5.5 4zm13 0a2.5 2.5 0 0 0-2.466 2.916l.043.2.028.016a8.04 8.04 0 0 1 2.128 1.852A2.5 2.5 0 1 0 18.5 4z"></path></svg>
    </div>
  </label>
</div>