Radio by aadium

Made by

@aadium

Theme:

Dark

#radio#futuristic#futuristic-radio-buttons

#212121

133 views

CSSAdd prefixes

1.container input[type="radio"] {
2  position: absolute;
3  opacity: 0;
4  cursor: pointer;
5  height: 0;
6  width: 0;
7}
8
9.container {
10  display: inline-block;
11  position: relative;
12  cursor: pointer;
13  font-size: 17px;
14  width: 4em;
15  height: 4em;
16  user-select: none;
17  border: 4px solid;
18  border-image-slice: 1;
19  background-color: #212121;
20}
21
22label {
23  font-size: 12px;
24  margin-top: -6px;
25  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
26  text-align: center;
27  visibility: visible;
28}
29
30#topleft {
31  border-image-source: linear-gradient(-45deg, #743ad5, #d53a9d);
32}
33
34#topright {
35  border-image-source: linear-gradient(45deg, #743ad5, #d53a9d);
36}
37
38#bottomleft {
39  border-image-source: linear-gradient(-135deg, #743ad5, #d53a9d);
40}
41
42#bottomright {
43  border-image-source: linear-gradient(135deg, #743ad5, #d53a9d);
44}
45
46.selected {
47  position: absolute;
48  top: 0;
49  left: 0;
50  width: 100%;
51  height: 100%;
52}
53
54#topleft:hover {
55  border-image-source: linear-gradient(-45deg, #743ad5, #d53a9d);
56  background-image: linear-gradient(-45deg, #743ad5, #d53a9d);
57}
58
59#topright:hover {
60  border-image-source: linear-gradient(45deg, #743ad5, #d53a9d);
61  background-image: linear-gradient(45deg, #743ad5, #d53a9d);
62}
63
64#bottomleft:hover {
65  border-image-source: linear-gradient(-135deg, #743ad5, #d53a9d);
66  background-image: linear-gradient(-135deg, #743ad5, #d53a9d);
67}
68
69#bottomright:hover {
70  border-image-source: linear-gradient(135deg, #743ad5, #d53a9d);
71  background-image: linear-gradient(135deg, #743ad5, #d53a9d);
72}
73
74#topleft input[type="radio"]:checked ~ .selected {
75  box-shadow: 5px 5px 25px #743ad5,
76                -5px -5px 25px #d53a9d;
77  border-image-slice: 1;
78}
79
80#topright input[type="radio"]:checked ~ .selected {
81  box-shadow: -5px 5px 25px #743ad5,
82                5px -5px 25px #d53a9d;
83  border-image-slice: 1;
84}
85
86#bottomleft input[type="radio"]:checked ~ .selected {
87  box-shadow: -5px 5px 25px #d53a9d,
88                5px -5px 25px #743ad5;
89  border-image-slice: 1;
90}
91
92#bottomright input[type="radio"]:checked ~ .selected {
93  box-shadow: -5px -5px 25px #743ad5,
94                5px 5px 25px #d53a9d;
95  border-image-slice: 1;
96}
97

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

.container {
  display: inline-block;
  position: relative;
  cursor: pointer;
  font-size: 17px;
  width: 4em;
  height: 4em;
  user-select: none;
  border: 4px solid;
  border-image-slice: 1;
  background-color: #212121;
}

label {
  font-size: 12px;
  margin-top: -6px;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  text-align: center;
  visibility: visible;
}

#topleft {
  border-image-source: linear-gradient(-45deg, #743ad5, #d53a9d);
}

#topright {
  border-image-source: linear-gradient(45deg, #743ad5, #d53a9d);
}

#bottomleft {
  border-image-source: linear-gradient(-135deg, #743ad5, #d53a9d);
}

#bottomright {
  border-image-source: linear-gradient(135deg, #743ad5, #d53a9d);
}

.selected {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#topleft:hover {
  border-image-source: linear-gradient(-45deg, #743ad5, #d53a9d);
  background-image: linear-gradient(-45deg, #743ad5, #d53a9d);
}

#topright:hover {
  border-image-source: linear-gradient(45deg, #743ad5, #d53a9d);
  background-image: linear-gradient(45deg, #743ad5, #d53a9d);
}

#bottomleft:hover {
  border-image-source: linear-gradient(-135deg, #743ad5, #d53a9d);
  background-image: linear-gradient(-135deg, #743ad5, #d53a9d);
}

#bottomright:hover {
  border-image-source: linear-gradient(135deg, #743ad5, #d53a9d);
  background-image: linear-gradient(135deg, #743ad5, #d53a9d);
}

#topleft input[type="radio"]:checked ~ .selected {
  box-shadow: 5px 5px 25px #743ad5,
                -5px -5px 25px #d53a9d;
  border-image-slice: 1;
}

#topright input[type="radio"]:checked ~ .selected {
  box-shadow: -5px 5px 25px #743ad5,
                5px -5px 25px #d53a9d;
  border-image-slice: 1;
}

#bottomleft input[type="radio"]:checked ~ .selected {
  box-shadow: -5px 5px 25px #d53a9d,
                5px -5px 25px #743ad5;
  border-image-slice: 1;
}

#bottomright input[type="radio"]:checked ~ .selected {
  box-shadow: -5px -5px 25px #743ad5,
                5px 5px 25px #d53a9d;
  border-image-slice: 1;
}

HTML

1<label class="container" id="topleft">
2  <input type="radio" name="my-radio-button">
3  <label id="tl">Top <br>Left</label>
4  <div class="selected"></div>
5</label>
6&nbsp;
7<label class="container" id="topright">
8  <input type="radio" name="my-radio-button">
9  <label id="tr">Top<br>Right</label>
10  <div class="selected"></div>
11</label>
12<br>
13<br>
14<label class="container" id="bottomleft">
15  <input type="radio" name="my-radio-button">
16  <label id="bl">Bottom <br>Left</label>
17  <div class="selected"></div>
18</label>
19&nbsp;
20<label class="container" id="bottomright">
21  <input type="radio" name="my-radio-button">
22  <label id="br">Bottom <br>Right</label>
23  <div class="selected"></div>
24</label>

<label class="container" id="topleft">
  <input type="radio" name="my-radio-button">
  <label id="tl">Top <br>Left</label>
  <div class="selected"></div>
</label>
&nbsp;
<label class="container" id="topright">
  <input type="radio" name="my-radio-button">
  <label id="tr">Top<br>Right</label>
  <div class="selected"></div>
</label>
<br>
<br>
<label class="container" id="bottomleft">
  <input type="radio" name="my-radio-button">
  <label id="bl">Bottom <br>Left</label>
  <div class="selected"></div>
</label>
&nbsp;
<label class="container" id="bottomright">
  <input type="radio" name="my-radio-button">
  <label id="br">Bottom <br>Right</label>
  <div class="selected"></div>
</label>