Radio by sandeepgopan

This radio was created for futuristic-radio-buttons

Made by

@sandeepgopan

Theme:

Light

#hover#input#theme-switch#radio#futuristic-radio-buttons

#e8e8e8

47 views

CSSAdd prefixes

1.radio-compont {
2  display: flex;
3  font-family: 'Courier New', Courier, monospace;
4  padding: 10px;
5  cursor: pointer;
6  transition: 0.3s;
7}
8
9.radio-text {
10  padding: 0px 10px;
11  color: hsl(0, 0%, 50%);
12  font-size: 20px;
13  text-transform: uppercase;
14  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
15}
16
17.radio-compont:hover {
18  box-shadow: inset 4px 4px 12px #afaeae,inset -4px -4px 12px #ffffffc9;
19  border-radius: 100px;
20}
21
22.radiostyle:checked~.radio-text {
23  color: #E41C23;
24}
25
26.radiostyle {
27  width: 20px;
28  height: 20px;
29}
30

.radio-compont {
  display: flex;
  font-family: 'Courier New', Courier, monospace;
  padding: 10px;
  cursor: pointer;
  transition: 0.3s;
}

.radio-text {
  padding: 0px 10px;
  color: hsl(0, 0%, 50%);
  font-size: 20px;
  text-transform: uppercase;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.radio-compont:hover {
  box-shadow: inset 4px 4px 12px #afaeae,inset -4px -4px 12px #ffffffc9;
  border-radius: 100px;
}

.radiostyle:checked~.radio-text {
  color: #E41C23;
}

.radiostyle {
  width: 20px;
  height: 20px;
}

HTML

1<div class="radio-input">
2  <label class="radio-compont">
3      <input type="radio" id="value-1" class="radiostyle" name="value-radio" value="value-1">
4          <div class="radio-text">Option 1</div>
5  </label>
6  <label class="radio-compont">
7      <input type="radio" id="value-2" class="radiostyle" name="value-radio" value="value-2">
8        <div class="radio-text">Option 2</div>
9  </label>
10  <label class="radio-compont">
11      <input type="radio" id="value-3" class="radiostyle" name="value-radio" value="value-3">
12        <div class="radio-text">Option 3</div>
13  </label>
14</div>

<div class="radio-input">
  <label class="radio-compont">
      <input type="radio" id="value-1" class="radiostyle" name="value-radio" value="value-1">
          <div class="radio-text">Option 1</div>
  </label>
  <label class="radio-compont">
      <input type="radio" id="value-2" class="radiostyle" name="value-radio" value="value-2">
        <div class="radio-text">Option 2</div>
  </label>
  <label class="radio-compont">
      <input type="radio" id="value-3" class="radiostyle" name="value-radio" value="value-3">
        <div class="radio-text">Option 3</div>
  </label>
</div>