Radio Buttons - WebDevTales

52 Radio Buttons

Modern, responsive Radio Buttons for sleek UI design

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
  <div class="selector">
    <div class="cube"></div>
    <input type="radio" name="cube-select" id="option1">
    <label for="option1">
        <div class="option option1"><i class="fa-solid fa-fire"></i></div>
    </label>
    <input type="radio" name="cube-select" id="option2">
    <label for="option2">
        <div class="option option2"><i class="fa-solid fa-sun"></i></div>
    </label>
    <input type="radio" name="cube-select" id="option3">
    <label for="option3">
        <div class="option option3"><i class="fa-solid fa-moon"></i></div>
    </label>
    <input type="radio" name="cube-select" id="option4">
    <label for="option4">
        <div class="option option4"><i class="fa-solid fa-water"></i></div>
    </label>
    <input type="radio" name="cube-select" id="option5">
    <label for="option5">
        <div class="option option5"><i class="fa-solid fa-wind"></i></div>
    </label>
    <input type="radio" name="cube-select" id="option6">
    <label for="option6">
        <div class="option option6"><i class="fa-solid fa-bolt"></i></div>
    </label>
    <input type="radio" name="cube-select" id="option7">
    <label for="option7">
        <div class="option option7"><i class="fa-solid fa-seedling"></i></div>
    </label>
    <input type="radio" name="cube-select" id="option8">
    <label for="option8">
        <div class="option option8"><i class="fa-solid fa-gem"></i></div>
    </label>
</div>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #080808;
  overflow: hidden;
}

.selector {
  position: relative;
  width: 15rem;
  height: 15rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cube {
  width: 12rem;
  height: 12rem;
  border: 3px solid #707070;
  position: absolute;
  transform: rotate(45deg);
}

.option {
  width: 45px;
  height: 45px;
  position: absolute;
  border: 3px solid #ffcc00;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.option i {
  font-size: 20px;
  color: #ffcc00;
  transition: color 0.3s ease, transform 0.3s ease;
}

/* Positioning */
.option.option1 { top: 20px; left: 30px; }
.option.option2 { top: -40px; left: 95px; }
.option.option3 { top: 20px; right: 30px; }
.option.option4 { top: 95px; left: -40px; }
.option.option5 { top: 90px; right: -40px; }
.option.option6 { bottom: 20px; left: 30px; }
.option.option7 { bottom: -40px; left: 95px; }
.option.option8 { bottom: 20px; right: 30px; }

input[type="radio"] {
  display: none;
}

input[type="radio"]:checked + label .option {
  transform: scale(1.2);
  box-shadow: 0 0 20px rgba(0, 255, 127, 1);
  border-radius: 10%;
  border: 5px double #00ff7f;
  animation: rotate 1s linear forwards;
}

@keyframes rotate {
  0% { transform: rotate(45deg); }
  100% { transform: rotate(90deg); }
}


input[type="radio"]:checked + label .option i {
  color: #00ff7f;
  transform: scale(1.3);
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
  <div class="radio-container">
    <!-- Option 1 -->
    <div class="radio-item">
        <input type="radio" name="radio-group" id="option1">
        <label for="option1">
            <i class="fa-solid fa-rocket"></i>
            <span>Launch</span>
        </label>
    </div>

    <!-- Option 2 -->
    <div class="radio-item">
        <input type="radio" name="radio-group" id="option2">
        <label for="option2">
            <i class="fa-solid fa-gem"></i>
            <span>Premium</span>
        </label>
    </div>

    <!-- Option 3 -->
    <div class="radio-item">
        <input type="radio" name="radio-group" id="option3">
        <label for="option3">
            <i class="fa-solid fa-fire"></i>
            <span>Hot</span>
        </label>
    </div>

</div>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #0f0f0f;
  overflow: hidden;
  font-family: 'Arial', sans-serif;
}

.radio-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.radio-item {
  position: relative;
  width: 150px;
  height: 60px;
  cursor: pointer;
}

.radio-item input[type="radio"] {
  display: none;
}

.radio-item label {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  padding-left: 20px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  overflow: hidden;
  transition: all 0.3s ease;
}

span{
  font-size: 20px;
  margin-left: 1rem;
}

/* Magnetic Particles */
.radio-item label::before,
.radio-item label::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  opacity: 0;
  transition: all 0.5s ease;
}

.radio-item label::before {
  top: 10px;
  left: 10px;
}

.radio-item label::after {
  bottom: 10px;
  right: 10px;
}

.radio-item:hover label::before,
.radio-item:hover label::after {
  opacity: 1;
}

/* Particle Animation on Hover */
.radio-item:hover label::before {
  transform: translate(150px, 30px);
}

.radio-item:hover label::after {
  transform: translate(-150px, -30px);
}

/* Selected Effect */
.radio-item input[type="radio"]:checked + label {
  background: linear-gradient(45deg, #00ffcc, #00b3ff);
  box-shadow: 0 0 20px rgba(0, 255, 204, 0.8), 0 0 40px rgba(0, 255, 204, 0.6);
}

.radio-item input[type="radio"]:checked + label::before,
.radio-item input[type="radio"]:checked + label::after {
  opacity: 1;
  transform: translate(0, 0);
  background: #fff;
}

.radio-item input[type="radio"]:checked + label i,
.radio-item input[type="radio"]:checked + label span {
  color: #0f0f0f;
}

/* Unique Colors for Each Option */
#option1:checked + label { background: linear-gradient(45deg, #ff6b6b, #ff9f43); }
#option2:checked + label { background: linear-gradient(45deg, #4ecdc4, #00d2d3); }
#option3:checked + label { background: linear-gradient(45deg, #f368e0, #ff6b6b); }

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <div class="radio-container">
    <!-- Option 1 -->
    <label class="radio-card">
        <input type="radio" name="radio-group" id="option1">
        <div class="card-inner">
            <div class="card-front">
                <i class="fa-solid fa-rocket"></i>
                <h3 id='launch'  id="boomdevs_8" >Launch</h3>
            </div>
            <div class="card-back">
                <i class="fa-solid fa-rocket"></i>
                <h3 id='ready'  id="boomdevs_9" >Ready!</h3>
            </div>
        </div>
    </label>

    <!-- Option 2 -->
    <label class="radio-card">
        <input type="radio" name="radio-group" id="option2">
        <div class="card-inner">
            <div class="card-front">
                <i class="fa-solid fa-gem"></i>
                <h3 id='premium'  id="boomdevs_10" >Premium</h3>
            </div>
            <div class="card-back">
                <i class="fa-solid fa-gem"></i>
                <h3 id='selected'  id="boomdevs_11" >Selected!</h3>
            </div>
        </div>
    </label>

    <!-- Option 3 -->
    <label class="radio-card">
        <input type="radio" name="radio-group" id="option3">
        <div class="card-inner">
            <div class="card-front">
                <i class="fa-solid fa-fire"></i>
                <h3 id='hot'  id="boomdevs_12" >Hot</h3>
            </div>
            <div class="card-back">
                <i class="fa-solid fa-fire"></i>
                <h3 id='burning'  id="boomdevs_13" >Burning!</h3>
            </div>
        </div>
    </label>
</div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #0f0f0f;
  font-family: 'Arial', sans-serif;
  overflow: hidden;
}

.radio-container {
  display: flex;
  gap: 20px;
}

.radio-card {
  width: 90px;
  height: 140px;
  perspective: 1000px;
  cursor: pointer;
}

.radio-card input[type="radio"] {
  display: none;
}

.radio-card .card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s ease-in-out;
}

.radio-card:hover .card-inner {
  transform: rotateY(180deg);
}

.radio-card .card-front,
.radio-card .card-back {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.radio-card .card-front {
  background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
  color: #ccc;
}

.radio-card .card-back {
  background: linear-gradient(135deg, #00ffcc, #00b3ff);
  color: #0f0f0f;
  transform: rotateY(180deg);
}

.radio-card i {
  font-size: 40px;
  margin-bottom: 10px;
}

.radio-card h3 {
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}

/* Neon Glow Effect on Selection */
.radio-card input[type="radio"]:checked + .card-inner .card-front {
  box-shadow: 0 0 20px rgba(0, 255, 204, 0.8), 0 0 40px rgba(0, 255, 204, 0.6);
}

.radio-card input[type="radio"]:checked + .card-inner .card-back {
  box-shadow: 0 0 20px rgba(0, 255, 204, 0.8), 0 0 40px rgba(0, 255, 204, 0.6);
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  
<div class="radio-container">
  <input type="radio" class="radio" id="radio1" name="group1">
  <label for="radio1" class="radio-label">Option A</label>
</div>

body {
  font-family: Arial, sans-serif;
  background: #030303;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.radio-container {
  display: flex;
  align-items: center;
}

.radio {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 3px solid transparent;
  background: transparent;
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  background-image: linear-gradient(45deg, #ff7e5f, #feb47b);
}

.radio:checked {
  transform: scale(1.5);
  background-color: #fff;
  border-color: #ff7e5f;
  box-shadow: 0 0 10px rgba(255, 87, 34, 1);
}

.radio:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1rem;
  height: 1rem;
  background-color: #ff7e5f;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: pulse 1s ease-in-out infinite;
}

@keyframes pulse {
  0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0.8; }
  50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.5; }
  100% { transform: translate(-50%, -50%) scale(0.5); opacity: 0.8; }
}

.radio-label {
  margin-left: 1rem;
  font-size: 1.2rem;
  color: #e4dada;
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  
<div class="radio-container">
  <label class="radio-label">
      <input type="radio" name="pastel" id="pastel1" class="pastel-radio" checked>
      <span class="radio"></span> Option 1
  </label>
  <label class="radio-label">
      <input type="radio" name="pastel" id="pastel2" class="pastel-radio">
      <span class="radio"></span> Option 2
  </label>
  <label class="radio-label">
      <input type="radio" name="pastel" id="pastel3" class="pastel-radio">
      <span class="radio"></span> Option 3
  </label>
</div>

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.radio-container {
  display: flex;
  flex-direction: column; /* Stack radio buttons vertically */
  gap: 20px; /* Space between radio buttons */
}

input[type="radio"] {
  display: none; /* Hide the default radio button */
}

.radio {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #ffb3ba;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0 10px rgba(255, 179, 186, 0.5);
}

input[type="radio"]:checked + .radio {
  background-color: #ff677d; /* Change background when checked */
  box-shadow: 0 0 20px rgba(255, 103, 125, 1); /* Glow effect */
}

.radio-label {
  font-size: 1.2rem;
  color: #333;
  cursor: pointer; /* Change cursor to pointer */
  display: flex; /* Use flexbox for alignment */
  align-items: center; /* Center items vertically */
  gap: 10px; /* Space between radio and label text */
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  
<div class="radio-container">
  <label class="radio-label">
      <input type="radio" name="diamond" id="diamond1" class="diamond-radio" checked>
      <span class="radio"></span> Option 1
  </label>
  <label class="radio-label">
      <input type="radio" name="diamond" id="diamond2" class="diamond-radio">
      <span class="radio"></span> Option 2
  </label>
  <label class="radio-label">
      <input type="radio" name="diamond" id="diamond3" class="diamond-radio">
      <span class="radio"></span> Option 3
  </label>
</div>

body {
  font-family: Arial, sans-serif;
  background-color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.radio-container {
  display: flex;
  flex-direction: column; /* Stack radio buttons vertically */
  gap: 20px; /* Space between radio buttons */
}

input[type="radio"] {
  display: none; /* Hide the default radio button */
}

.radio {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #ff7e5f, #feb47b);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0 10px rgba(255, 126, 95, 0.5);
}

input[type="radio"]:checked + .radio {
  transform: scale(1.3) rotate(45deg); /* Slightly enlarge when checked */
  box-shadow: 0 0 120px rgba(255, 126, 95, 1); /* Glow effect */
}

.radio-label {
  font-size: 1.2rem;
  color: #fff;
  cursor: pointer; /* Change cursor to pointer */
  display: flex; /* Use flexbox for alignment */
  align-items: center; /* Center items vertically */
  gap: 10px; /* Space between radio and label text */
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<div class="radio-container">
  <label class="radio-label">
      <input type="radio" name="neon" id="neon1" class="neon-radio" checked>
      <span class="radio"></span> Option 1
  </label>
  <label class="radio-label">
      <input type="radio" name="neon" id="neon2" class="neon-radio">
      <span class="radio"></span> Option 2
  </label>
  <label class="radio-label">
      <input type="radio" name="neon" id="neon3" class="neon-radio">
      <span class="radio"></span> Option 3
  </label>
</div>

body {
  font-family: Arial, sans-serif;
  background-color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.radio-container {
  display: flex;
  flex-direction: column; /* Stack radio buttons vertically */
  gap: 20px; /* Space between radio buttons */
}

input[type="radio"] {
  display: none; /* Hide the default radio button */
}

.radio {
  width: 50px;
  height: 50px;
  background-color: #1e1e1e;
  border: 2px solid #00ffcc;
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0 10px rgba(0, 255, 204, 0.5);
}

input[type="radio"]:checked + .radio {
  background-color: #00ffcc; /* Change background when checked */
  box-shadow: 0 0 20px rgba(0, 255, 204, 1); /* Neon glow effect */
}

.radio-label {
  font-size: 1.2rem;
  color: #fff;
  cursor: pointer; /* Change cursor to pointer */
  display: flex; /* Use flexbox for alignment */
  align-items: center; /* Center items vertically */
  gap: 10px; /* Space between radio and label text */
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  
<div class="radio-container">
  <label class="radio-label">
      <input type="radio" name="colorful" id="colorful1" class="colorful-radio" checked>
      <span class="radio"></span> Option 1
  </label>
  <label class="radio-label">
      <input type="radio" name="colorful" id="colorful2" class="colorful-radio">
      <span class="radio"></span> Option 2
  </label>
  <label class="radio-label">
      <input type="radio" name="colorful" id="colorful3" class="colorful-radio">
      <span class="radio"></span> Option 3
  </label>
</div>

body {
  font-family: Arial, sans-serif;
  background-color: #222;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.radio-container {
  display: flex;
  flex-direction: column; /* Stack radio buttons vertically */
  gap: 20px; /* Space between radio buttons */
}

input[type="radio"] {
  display: none; /* Hide the default radio button */
}

.radio {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid transparent;
  position: relative;
  cursor: pointer;
  background: linear-gradient(135deg, #ff416c, #ff4b2b);
  transition: all 0.3s ease;
box-shadow: 0 0 10px rgba(255, 65, 108, 0.5);
}

input[type="radio"]:checked + .radio {
  border: 3px solid #fff; /* White border when checked */
  transform: scale(1.1); /* Slightly enlarge when checked */
}

.radio-label {
  font-size: 1.2rem;
  color: #fff;
  cursor: pointer; /* Change cursor to pointer */
  display: flex; /* Use flexbox for alignment */
  align-items: center; /* Center items vertically */
  gap: 10px; /* Space between radio and label text */
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  
<div class="radio-container">
  <label class="radio-label">
      <input type="radio" name="toggle" id="toggle1" class="toggle-radio" checked>
      <span class="toggle"></span> Option 1
  </label>
  <label class="radio-label">
      <input type="radio" name="toggle" id="toggle2" class="toggle-radio">
      <span class="toggle"></span> Option 2
  </label>
  <label class="radio-label">
      <input type="radio" name="toggle" id="toggle3" class="toggle-radio">
      <span class="toggle"></span> Option 3
  </label>
</div>

body {
  font-family: Arial, sans-serif;
  background-color: #111;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.radio-container {
  display: flex;
  flex-direction: column; /* Stack radio buttons vertically */
  gap: 20px; /* Space between radio buttons */
}

input[type="radio"] {
  display: none; /* Hide the default radio button */
}

.toggle {
  position: relative;
  width: 60px;
  height: 30px;
  background-color: #444;
  border-radius: 30px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.toggle:before {
  content: '';
  position: absolute;
  width: 26px;
  height: 26px;
  background-color: #f43676;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: transform 0.3s ease;
}

input[type="radio"]:checked + .toggle {
  background-color: #f43676; /* Change background when checked */
}

input[type="radio"]:checked + .toggle:before {
  transform: translateX(30px); /* Move the toggle switch */
}

.radio-label {
  font-size: 1.2rem;
  color: #fff;
  cursor: pointer; /* Change cursor to pointer */
  display: flex; /* Use flexbox for alignment */
  align-items: center; /* Center items vertically */
  gap: 10px; /* Space between toggle and label text */
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  
<div class="radio-container">
  <label class="radio-label">
      <input type="radio" name="radio" id="radio1" class="radio" checked>
      <span class="radio"></span> Radio 1
  </label>
  <label class="radio-label">
      <input type="radio" name="radio" id="radio2" class="radio">
      <span class="radio"></span> Radio 2
  </label>
  <label class="radio-label">
      <input type="radio" name="radio" id="radio3" class="radio">
      <span class="radio"></span> Radio 3
  </label>
</div>

body {
  font-family: Arial, sans-serif;
  background-color: #111;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.radio-container {
  display: flex;
  flex-direction: column; /* Stack radio buttons vertically */
  gap: 15px; /* Space between radio buttons */
}

input[type="radio"] {
  display: none; /* Hide the default radio button */
}

.radio {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 3px solid transparent;
  position: relative;
  cursor: pointer;
  background-color: #222;
  transition: all 0.3s ease-in-out;
}

input[type="radio"]:checked + .radio {
  background-color: #00fff7; /* Change background when checked */
}

.radio:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1rem;
  height: 1rem;
  background-color: #00fff7;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease-in-out;
}

input[type="radio"]:checked + .radio:before {
  transform: translate(-50%, -50%) scale(1.5); /* Scale effect when checked */
}

.radio-label {
  font-size: 1.2rem;
  color: #fff;
  cursor: pointer; /* Change cursor to pointer */
  display: flex; /* Use flexbox for alignment */
  align-items: center; /* Center items vertically */
  gap: 10px; /* Space between radio button and label text */
}

.radio:hover {
  transform: scale(1.1); /* Scale effect on hover */
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <div class="radio-container">
    <input type="radio" id="radio1" name="radio" checked>
    <label for="radio1"></label>
    
    <input type="radio" id="radio2" name="radio">
    <label for="radio2"></label>
</div>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  background: #111;
}
.radio-container {
  display: flex;
  align-items: center;
  gap: 10px;
}
.radio-container input[type="radio"] {
  display: none;
}
.radio-container label {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: 3px solid white;
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
}
.radio-container input[type="radio"]:checked + label {
  background: radial-gradient(circle, white 40%, transparent 50%);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <div class="radio-container">
    <input type="radio" id="radio1" name="radio-group" checked>
    <label for="radio1" class="radio-label">Option 1</label>
    
    <input type="radio" id="radio2" name="radio-group">
    <label for="radio2" class="radio-label">Option 2</label>
    
    <input type="radio" id="radio3" name="radio-group">
    <label for="radio3" class="radio-label">Option 3</label>
  </div>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #000;
  margin: 0;
  font-family: Arial, sans-serif;
  color: #fff;
}

/* Hide the default radio button */
input[type="radio"] {
  display: none;
}

/* Custom radio button container */
.radio-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Custom radio button label */
.radio-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 20px;
  color: #999;
  transition: color 0.3s ease;
  position: relative;
  padding-left: 40px; /* Space for custom radio button */
}

/* Custom radio button circle */
.radio-label::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 2px solid #ffcc00;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.3s ease;
}

/* Inner dot for selected state */
.radio-label::after {
  content: '';
  display: inline-block;
  width: 24px;
  height: 24px;
  background-color: #ffcc00;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scale(0);
  transition: transform 0.3s ease;
  box-shadow: 0 0 30px 10px rgba(255, 204, 0, 0.8);
}

/* Hover effect */
.radio-label:hover {
  color: #ffcc00;
}

.radio-label:hover::before {
  border-color: #ffeb80;
}

/* Selected state */
input[type="radio"]:checked + .radio-label::after {
  transform: translateY(-50%) scale(1);
}

input[type="radio"]:checked + .radio-label {
  color: #ffcc00;
  text-shadow: 0 0 10px rgba(255, 204, 0, 0.8);
}

input[type="radio"]:checked + .radio-label::before {
  border-color: #ffcc00;
}

/* Accessibility improvements */
input[type="radio"]:focus + .radio-label {
  outline: none;
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <div class="radio-container">
    <input type="radio" id="radio1" name="radio-group" checked>
    <label for="radio1" class="radio-label">Option 1</label>
    
    <input type="radio" id="radio2" name="radio-group">
    <label for="radio2" class="radio-label">Option 2</label>
    
    <input type="radio" id="radio3" name="radio-group">
    <label for="radio3" class="radio-label">Option 3</label>
  </div>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #000000;
  margin: 0;
  font-family: Arial, sans-serif;
}

/* Hide the default radio button */
input[type="radio"] {
  display: none;
}

/* Custom radio button container */
.radio-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Custom radio button label */
.radio-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 18px;
  color: #333;
  transition: color 0.3s ease;
  position: relative;
  padding-left: 30px; /* Space for custom radio button */
}

/* Custom radio button circle */
.radio-label::before {
  content: '';
  display: inline-block;
  width: 19px;
  height: 20px;
  border: 2px solid #f43676;
  border-left: 5px solid #f43676;
  border-right: 5px solid #f43676;
  border-radius: 10%;
  position: absolute;
  left: 0;
  top: 50%;
  margin-left: -1rem;
  transform: translateY(-50%);
  transition: all 0.3s ease;
}

/* Inner dot for selected state */
.radio-label::after {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #f43676;
  border-radius: 0%;
  position: absolute;
  left: 4px; /* Adjusted position */
  top: 50%;
  box-shadow: 50px 0px 40px 8px #ff1f7c;
  transform: translateY(-50%) scale(0);
  transition: transform 0.3s ease;
}

/* Hover effect */
.radio-label:hover::before {
  border-color: #abb4b2;
}

/* Selected state */
input[type="radio"]:checked + .radio-label::after {
  transform: translateY(-50%) scale(1);
}

input[type="radio"]:checked + .radio-label::before {
  border-color: #c6ccca;
}

/* Focus state */
input[type="radio"]:focus + .radio-label::before {
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.3);
}

/* Accessibility improvements */
input[type="radio"]:focus + .radio-label {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.3);
}

input[type="radio"]:checked + .radio-label {
  color: #f43676;
  text-shadow: 0 0 10px rgba(255, 204, 0, 0.8);
}


.radio-label {
  user-select: none;
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <div class="radio-container">
    <input type="radio" id="tile1" name="radio-group" checked>
    <label for="tile1" class="tile-label">Tile Option 1</label>

    <input type="radio" id="tile2" name="radio-group">
    <label for="tile2" class="tile-label">Tile Option 2</label>

    <input type="radio" id="tile3" name="radio-group">
    <label for="tile3" class="tile-label">Tile Option 3</label>
  </div>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #080808;
  margin: 0;
  font-family: Arial, sans-serif;
  color: #fff;
}

/* Hide the default radio button */
input[type="radio"] {
  display: none;
}

/* Radio button container */
.radio-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Futuristic Tile Style */
.tile-label {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 20px;
  color: #00eaff;
  background-color: #1a1a1a;
  padding: 20px 40px;
  border: 2px solid transparent;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

/* Glowing border animation */
.tile-label::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2px solid transparent;
  border-radius: 10px;
  box-shadow: 0 0 10px #00eaff, 0 0 20px #0088ff;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Selected state */
input[type="radio"]:checked + .tile-label {
  border: 2px solid #00eaff;
  box-shadow: 0 0 20px #00eaff, 0 0 40px #0088ff;
}

input[type="radio"]:checked + .tile-label::before {
  opacity: 1;
  animation: glow 1.5s infinite alternate;
}

/* Glow animation */
@keyframes glow {
  0% {
    box-shadow: 0 0 10px #00eaff, 0 0 20px #0088ff;
  }
  100% {
    box-shadow: 0 0 20px #00eaff, 0 0 40px #0088ff;
  }
}

/* Hover effect */
.tile-label:hover {
  background-color: #222;
  transform: scale(1.05);
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <div class="radio-container">
    <input type="radio" id="tile1" name="radio-group" checked>
    <label for="tile1" class="tile-label">
      Option 1
    </label>

    <input type="radio" id="tile2" name="radio-group">
    <label for="tile2" class="tile-label">
      Option 2
    </label>

    <input type="radio" id="tile3" name="radio-group">
    <label for="tile3" class="tile-label">
      Option 3
    </label>
  </div>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #080808;
  margin: 0;
  font-family: Arial, sans-serif;
  color: #fff;
}

/* Hide the default radio button */
input[type="radio"] {
  display: none;
}

/* Radio button container */
.radio-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* Futuristic Tile Style */
.tile-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-size: 18px;
  color: #00eaff;
  padding: 15px 20px;
  border: 2px solid transparent;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}



/* Selected state */
input[type="radio"]:checked + .tile-label {
  border-left: 3px solid #00eaff;
  border-right: 3px solid #00eaff;
}


/* Hover effect */
.tile-label:hover {
  background-color: #222;
  transform: scale(1.05);
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  <div class="radio-container">
    <input type="radio" id="tile1" name="radio-group" checked>
    <label for="tile1" class="tile-label">
      <i class="fas fa-arrow-right arrow-icon"></i>
      Tile Option 1
    </label>

    <input type="radio" id="tile2" name="radio-group">
    <label for="tile2" class="tile-label">
        <i class="fas fa-arrow-right arrow-icon"></i>
      Tile Option 2
    </label>

    <input type="radio" id="tile3" name="radio-group">
    <label for="tile3" class="tile-label">
      <i class="fas fa-arrow-right arrow-icon"></i>
      Tile Option 3
    </label>
  </div>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #080808;
  margin: 0;
  font-family: Arial, sans-serif;
  color: #fff;
}

/* Hide the default radio button */
input[type="radio"] {
  display: none;
}

/* Radio button container */
.radio-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* Futuristic Tile Style */
.tile-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-size: 18px;
  color: #ff0000;
  padding: 5px 20px;
  border: 2px solid transparent;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

/* Arrow icon (hidden by default) */
.tile-label .arrow-icon {
  color: aquamarine;
  font-size: 26px;
  margin-right: 1.5rem;
  opacity: 0;
  transition: all 0.3s ease;
}

/* Selected state */
input[type="radio"]:checked + .tile-label {
  font-weight: bold;
  color: aquamarine;
}

input[type="radio"]:checked + .tile-label .arrow-icon {
    animation: hoverArrow 0.5s ease-in-out infinite;
  opacity: 1;
}

/* Hover effect */
.tile-label:hover {
    font-weight: bold;
    color: aquamarine;
    transform: scale(1.05);
}

@keyframes hoverArrow {
    0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(10px);
  }
  100% {
    transform: translateX(0);
  }
}


/* Glow animation for selected tile */
@keyframes glow {
  0% {
    box-shadow: 0 0 10px #00eaff, 0 0 20px #0088ff;
  }
  100% {
    box-shadow: 0 0 20px #00eaff, 0 0 40px #0088ff;
  }
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <div class="radio-container">
    <input type="radio" id="tile1" name="radio-group" checked>
    <label for="tile1" class="tile-label">🔥 Fire Mode</label>

    <input type="radio" id="tile2" name="radio-group">
    <label for="tile2" class="tile-label">🌿 Nature Mode</label>

    <input type="radio" id="tile3" name="radio-group">
    <label for="tile3" class="tile-label">🌊 Ocean Mode</label>
  </div>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #080808;
  margin: 0;
  font-family: Arial, sans-serif;
  color: #fff;
}

/* Hide default radio button */
input[type="radio"] {
  display: none;
}

/* Radio button container */
.radio-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* Futuristic Tile Style */
.tile-label {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  padding: 15px 20px;
  width: 150px;
  height: 30px;
  text-align: center;
  border: 3px solid transparent;
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
  transform-origin: center top;
  background: #222;
  color: #fff;
}

/* Flip animation */
input[type="radio"]:checked + .tile-label {
  animation: flip 0.5s ease-in-out;
}

@keyframes flip {
  0% { transform: rotateX(0); }
  50% { transform: rotateX(90deg); }
  100% { transform: rotateX(0); }
}

/* Different colors for selected options */
#tile1:checked + .tile-label {
  background: #ff5733;
  border-color: #ff8c66;
  color: #000;
}

#tile2:checked + .tile-label {
  background: #33ff57;
  border-color: #66ff8c;
  color: #000;
}

#tile3:checked + .tile-label {
  background: #3357ff;
  border-color: #668cff;
  color: #000;
}

/* Hover effect */
.tile-label:hover {
  transform: scale(1.05);
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <div class="radio-container">
    <input type="radio" id="tile1" name="radio-group" checked>
    <label for="tile1" class="tile-label" data-text="Selected: Red Mode">Red Mode</label>

    <input type="radio" id="tile2" name="radio-group">
    <label for="tile2" class="tile-label" data-text="Selected: Blue Mode">Blue Mode</label>

    <input type="radio" id="tile3" name="radio-group">
    <label for="tile3" class="tile-label" data-text="Selected: Green Mode">Green Mode</label>
  </div>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #f0f0f0;
  margin: 0;
  font-family: Arial, sans-serif;
}

/* Hide default radio button */
input[type="radio"] {
  display: none;
}

/* Card container */
.radio-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* Glassmorphism Card */
.tile-label {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  padding: 15px;
  width: 150px;
  height: 40px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
  font-weight: bold;
  color: #333;
  border: 2px solid transparent;
}

/* Slide Up Animation */
.tile-label::before {
  content: attr(data-text);
  position: absolute;
  width: 100%;
  height: 100%;
  background: #fff;
  color: #222;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 100%;
  left: 0;
  border-radius: 12px;
  transition: top 0.4s ease-in-out;
}

input[type="radio"]:checked + .tile-label::before {
  top: 0;
}

/* Unique Colors for Selected */
#tile1:checked + .tile-label {
  border-color: #ff4757;
  box-shadow: 0px 0px 15px #ff4757;
}


#tile2:checked + .tile-label {
  border-color: #1e90ff;
  box-shadow: 0px 0px 15px #1e90ff;
}

#tile3:checked + .tile-label {
  border-color: #2ed573;
  box-shadow: 0px 0px 15px #2ed573;
}

/* Hover Effect */
.tile-label:hover {
  transform: scale(1.05);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <div class="radio-container">
    <input type="radio" id="toggle1" name="radio-group" checked>
    <label for="toggle1" class="toggle-label">🔥 Heat Mode</label>

    <input type="radio" id="toggle2" name="radio-group">
    <label for="toggle2" class="toggle-label">💧 Cool Mode</label>

    <input type="radio" id="toggle3" name="radio-group">
    <label for="toggle3" class="toggle-label">🌿 Eco Mode</label>
  </div>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #f8f8f8;
  margin: 0;
  font-family: Arial, sans-serif;
}

/* Hide default radio button */
input[type="radio"] {
  display: none;
}

/* Toggle Container */
.radio-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* Toggle Bars */
.toggle-label {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
  font-size: 18px;
  padding: 10px;
  width: 220px;
  height: 50px;
  border-radius: 30px;
  background: #e0e0e0;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
  font-weight: bold;
  color: #555;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.1);
}

/* Sliding Effect */
.toggle-label::before {
  content: "";
  position: absolute;
  width: 50px;
  height: 50px;
  background: #fff;
  border-radius: 50%;
  top: 0;
  left: 5px;
  transition: left 0.4s ease-in-out, background 0.4s ease-in-out;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Unique Colors for Selected */
#toggle1:checked + .toggle-label::before {
  left: calc(100% - 55px);
  background: #ff4757;
}

#toggle2:checked + .toggle-label::before {
  left: calc(100% - 55px);
  background: #1e90ff;
}

#toggle3:checked + .toggle-label::before {
  left: calc(100% - 55px);
  background: #2ed573;
}

/* Glowing Effect */
#toggle1:checked + .toggle-label {
  background: #ffe6e6;
  box-shadow: 0px 0px 15px #ff4757;
}

#toggle2:checked + .toggle-label {
  background: #e6f2ff;
  box-shadow: 0px 0px 15px #1e90ff;
}

#toggle3:checked + .toggle-label {
  background: #e6ffe6;
  box-shadow: 0px 0px 15px #2ed573;
}

/* Hover Effect */
.toggle-label:hover {
  transform: scale(1.05);
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <div class="radio-container">
    <input type="radio" id="orb1" name="radio-group" checked>
    <label for="orb1" class="orb-label">🔥</label>

    <input type="radio" id="orb2" name="radio-group">
    <label for="orb2" class="orb-label">💧</label>

    <input type="radio" id="orb3" name="radio-group">
    <label for="orb3" class="orb-label">🌿</label>
  </div>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #f0f0f0;
  margin: 0;
  font-family: Arial, sans-serif;
}

/* Hide default radio */
input[type="radio"] {
  display: none;
}

/* Orb Container */
.radio-container {
  display: flex;
  gap: 30px;
}

/* Orb Style */
.orb-label {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #ddd;
  cursor: pointer;
  transition: all 0.4s ease;
  font-size: 24px;
  font-weight: bold;
  color: #444;
  position: relative;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.1);
}

/* Orb Glow on Hover */
.orb-label:hover {
  transform: scale(1.1);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}

/* Selected Orb Effects */
input[type="radio"]:checked + .orb-label {
  transform: scale(1.3) translateY(-15px);
  font-size: 28px;
  font-weight: bold;
  color: white;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

/* Unique Colors for Selected */
#orb1:checked + .orb-label {
  background: #ff4757;
  box-shadow: 0 0 20px #ff4757;
}

#orb2:checked + .orb-label {
  background: #1e90ff;
  box-shadow: 0 0 20px #1e90ff;
}

#orb3:checked + .orb-label {
  background: #2ed573;
  box-shadow: 0 0 20px #2ed573;
}

/* Animation for Smooth Movement */
@keyframes popUp {
  0% { transform: scale(1) translateY(0); }
  50% { transform: scale(1.3) translateY(-15px); }
  100% { transform: scale(1.3) translateY(-15px); }
}

input[type="radio"]:checked + .orb-label {
  animation: popUp 0.4s ease-in-out;
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <div class="radio-container">
    <input type="radio" id="tab1" name="radio-group" checked>
    <label for="tab1" class="tab-label">🔥 Heat</label>

    <input type="radio" id="tab2" name="radio-group">
    <label for="tab2" class="tab-label">💧 Cool</label>

    <input type="radio" id="tab3" name="radio-group">
    <label for="tab3" class="tab-label">🌿 Eco</label>

    <div class="slider"></div>
  </div>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #f4f4f4;
  margin: 0;
  font-family: Arial, sans-serif;
}

/* Hide default radio */
input[type="radio"] {
  display: none;
}

/* Tab Container */
.radio-container {
  display: flex;
  background: #fff;
  padding: 5px;
  border-radius: 30px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  position: relative;
}

/* Tab Buttons */
.tab-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 50px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  color: #555;
  transition: color 0.3s ease;
  z-index: 2;
}

/* Sliding Indicator */
.slider {
  position: absolute;
  width: 120px;
  height: 50px;
  background: #ff4757;
  border-radius: 25px;
  transition: transform 0.3s ease-in-out, background 0.3s ease-in-out;
  z-index: 1;
}

/* Move Slider Based on Selection */
#tab1:checked ~ .slider { transform: translateX(0); background: #ff4757; }
#tab2:checked ~ .slider { transform: translateX(120px); background: #1e90ff; }
#tab3:checked ~ .slider { transform: translateX(240px); background: #2ed573; }

/* Change Text Color When Active */
#tab1:checked + .tab-label { color: white; }
#tab2:checked + .tab-label { color: white; }
#tab3:checked + .tab-label { color: white; }

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

  <div class="radio-container">
    <input type="radio" id="tab1" name="radio-group" checked>
    <label for="tab1" class="tab-label"><i class="fas fa-sun"></i></label>

    <input type="radio" id="tab2" name="radio-group">
    <label for="tab2" class="tab-label"><i class="fas fa-snowflake"></i></label>

    <input type="radio" id="tab3" name="radio-group">
    <label for="tab3" class="tab-label"><i class="fas fa-leaf"></i></label>

    <div class="slider"></div>
  </div>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #000000;
  margin: 0;
  font-family: Arial, sans-serif;
}

/* Hide default radio */
input[type="radio"] {
  display: none;
}

/* Tab Container */
.radio-container {
  display: flex;
  background: #000000;
  border: #e74c3c 5px solid;
  padding: 5px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  position: relative;
}

/* Tab Buttons */
.tab-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 60px;
  font-size: 24px;
  color: #555;
  transition: color 0.3s ease;
  cursor: pointer;
  z-index: 2;
}

/* Sliding Indicator */
.slider {
  position: absolute;
  width: 80px;
  height: 60px;
  background: #16d663;
  transition: transform 0.3s ease-in-out, background 0.3s ease-in-out;
  z-index: 1;
}

/* Move Slider Based on Selection */
#tab1:checked ~ .slider { transform: translateX(0); background: #ffdd55; }
#tab2:checked ~ .slider { transform: translateX(80px); background: #e74c3c; }
#tab3:checked ~ .slider { transform: translateX(160px); background: #2ecc71; }

/* Change Text Color When Active */
#tab1:checked + .tab-label { color: white; }
#tab2:checked + .tab-label { color: white; }
#tab3:checked + .tab-label { color: white; }

/* Icon Size */
.tab-label i {
  font-size: 30px;
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  <div class="radio-container">
    <input type="radio" id="tab1" name="radio-group" checked>
    <label for="tab1" class="tab-label"><i class="fas fa-sun"></i></label>

    <input type="radio" id="tab2" name="radio-group">
    <label for="tab2" class="tab-label"><i class="fas fa-snowflake"></i></label>

    <input type="radio" id="tab3" name="radio-group">
    <label for="tab3" class="tab-label"><i class="fas fa-leaf"></i></label>

    <div class="slider"></div>
  </div>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #f4f4f4;
  margin: 0;
  font-family: Arial, sans-serif;
}

/* Hide default radio */
input[type="radio"] {
  display: none;
}

/* Tab Container */
.radio-container {
  display: flex;
  background: #fff;
  padding: 10px;
  border-radius: 50px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
}

/* Tab Buttons */
.tab-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  font-size: 24px;
  color: #555;
  transition: color 0.3s ease;
  cursor: pointer;
  z-index: 2;
  border-radius: 50%;
}

/* Hover Effect */
.tab-label:hover {
  background-color: #e3e3e3;
  transform: scale(1.1);
}

/* Sliding Indicator */
.slider {
  position: absolute;
  width: 60px;
  height: 60px;
  background: #3498db;
  border-radius: 50%;
  transition: transform 0.3s ease-in-out, background 0.3s ease-in-out;
  z-index: 1;
}

/* Move Slider Based on Selection */
#tab1:checked ~ .slider { transform: translateX(0); background: #3498db; }
#tab2:checked ~ .slider { transform: translateX(60px); background: #e74c3c; }
#tab3:checked ~ .slider { transform: translateX(120px); background: #2ecc71; }

/* Change Text Color When Active */
#tab1:checked + .tab-label { color: white; }
#tab2:checked + .tab-label { color: white; }
#tab3:checked + .tab-label { color: white; }

/* Icon Size */
.tab-label i {
  font-size: 30px;
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <body class="light-text">
    <h1 id='choose-your-theme'  id="boomdevs_56" >Choose Your Theme</h1>

    <div class="theme-buttons">
        <div class="theme-button light" onclick="changeTheme('light')"></div>
        <div class="theme-button dark" onclick="changeTheme('dark')"></div>
        <div class="theme-button neon" onclick="changeTheme('neon')"></div>
        <div class="theme-button pastel" onclick="changeTheme('pastel')"></div>
    </div>
  </body>

body {
  margin: 0;
  padding: 0;
  font-family: 'Arial', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  transition: background-color 0.6s ease, color 0.6s ease;
  text-align: center;
  overflow: hidden;
}

.theme-buttons {
  position: absolute;
  bottom: 20px;
  display: flex;
  justify-content: center;
  gap: 20px;
}

.theme-button {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 5px solid #09ff7c;
}

.theme-button:hover {
  transform: scale(1.2);
}

.light {
  background-color: #f0f0f0;
}

.dark {
  background-color: #333;
}

.neon {
  background-color: #0a3e01;
}

.pastel {
  background-color: #530215;
}

.light-text {
  color: #333;
}

.dark-text {
  color: #f0f0f0;
}

.neon-text {
  color: #39ff14;
}

.pastel-text {
  color: #f4a7b9;
}

function changeTheme(theme) {
  const body = document.body;
  const themeButtons = document.querySelectorAll('.theme-button');
  const themeClasses = ['light', 'dark', 'neon', 'pastel'];
  const textClasses = ['light-text', 'dark-text', 'neon-text', 'pastel-text'];

  // Remove all previous theme and text classes
  body.classList.remove(...themeClasses);
  body.classList.remove(...textClasses);

  // Apply the selected theme class
  body.classList.add(`${theme}-text`);
  body.style.backgroundColor = getComputedStyle(document.querySelector(`.${theme}`)).backgroundColor;
}

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <div>
    <h1 id='how-are-you-feeling-today'  id="boomdevs_59" >How are you feeling today?</h1>

    <div class="mood-buttons">
        <div class="mood-button happy" onclick="changeMood('happy')">🙂</div>
        <div class="mood-button sad" onclick="changeMood('sad')">😢</div>
        <div class="mood-button neutral" onclick="changeMood('neutral')">😐</div>
        <div class="mood-button angry" onclick="changeMood('angry')">😡</div>
        <div class="mood-button excited" onclick="changeMood('excited')">😄</div>
    </div>
  </div>

body {
  margin: 0;
  padding: 0;
  font-family: 'Arial', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  transition: background-color 0.6s ease, color 0.6s ease;
  text-align: center;
  background-color: #f0f0f0;
}

h1 {
  font-size: 2rem;
  margin-bottom: 20px;
}

.mood-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.mood-button {
  font-size: 2rem;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.mood-button:hover {
  transform: scale(1.3);
}

.mood-button:active {
  transform: scale(1);
}

/* Mood Colors */
.happy { color: #ffeb3b; }
.sad { color: #2196f3; }
.neutral { color: #9e9e9e; }
.angry { color: #f44336; }
.excited { color: #cc9c3d; }

/* Large Screens (Desktops, Tablets) */
@media (min-width: 768px) {
  h1 {
      font-size: 2.5rem;
  }

  .mood-button {
      font-size: 3rem;
      margin: 10px;
  }
}

/* Small Mobile Devices */
@media (max-width: 480px) {
  h1 {
      font-size: 1.5rem;
      margin-bottom: 15px;
  }

  .mood-buttons {
      gap: 5px;
  }

  .mood-button {
      font-size: 1.8rem;
  }
}

/* Large Mobile Devices (Phablets) */
@media (min-width: 481px) and (max-width: 767px) {
  h1 {
      font-size: 2rem;
  }

  .mood-buttons {
      gap: 10px;
  }

  .mood-button {
      font-size: 2.2rem;
  }
}

function changeMood(mood) {
  const body = document.body;
  const moodClasses = ['happy', 'sad', 'neutral', 'angry', 'excited'];
  const moodColors = {
      happy: '#ffeb3b',   // Yellow
      sad: '#2196f3',     // Blue
      neutral: '#9e9e9e', // Gray
      angry: '#f44336',   // Red
      excited: '#ff5722'  // Orange
  };

  // Remove all previous mood classes
  body.classList.remove(...moodClasses);

  // Add the selected mood class and change the background color
  body.classList.add(mood);
  body.style.backgroundColor = moodColors[mood];
  document.querySelector('h1').style.color = moodColors[mood] === '#9e9e9e' ? '#333' : '#fff';
}

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <div class="radio-input">
    <label class="label">
      <div class="back-side"></div>
      <input type="radio" id="value-1" name="value-radio" value="value-1" />
      <span class="text">Start</span>
      <span class="bottom-line"></span>
    </label>
  
    <label class="label">
      <div class="back-side"></div>
      <input type="radio" id="value-2" name="value-radio" value="value-2" />
      <span class="text">Pause</span>
      <span class="bottom-line"></span>
    </label>
  
    <label class="label">
      <div class="back-side"></div>
      <input type="radio" id="value-3" name="value-radio" value="value-3" />
      <span class="text">Restart</span>
      <span class="bottom-line"></span>
    </label>
  </div>

  body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow:hidden;
    background-color: #000000;
  }
  .radio-input {
    display: flex;
    gap: 12px;
    padding: 8px;
    border-radius: 12px;
    overflow: hidden;
    height: 110px;
  }
  
  .radio-input input {
    display: none;
  }
  
  .radio-input .label {
    width: 80px;
    height: 90px;
    background-color: #242424;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 10px 8px;
    position: relative;
    transition: all 0.2s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  }
  
  .label .back-side {
    position: absolute;
    top: -8px;
    left: 0;
    background-color: #333;
    border-radius: 8px 8px 4px 4px;
    width: 100%;
    height: 16px;
    box-shadow: inset 0 5px 3px rgba(0, 0, 0, 0.5),
      inset 0px -5px 2px rgba(0, 0, 0, 0.1);
    transform: perspective(300px) rotateX(50deg);
    opacity: 0;
    transition: all 0.1s linear;
  }
  
  .label:has(input[type="radio"]:checked) .back-side {
    opacity: 1;
  }
  
  .label:has(input[type="radio"]:checked) {
    transform: perspective(200px) rotateX(-20deg);
    transform-origin: 50% 40%;
    box-shadow: inset 0px -20px 15px rgba(0, 0, 0, 0.6);
    border-top: 1px solid #ff6347;
    margin-top: 6px;
    border-radius: 0 0 8px 8px;
  }
  
  .label .text {
    color: #bbb;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    text-shadow: -1px -1px 1px rgba(255, 255, 255, 0.1);
    transition: all 0.2s linear;
  }
  
  .label input[type="radio"]:checked + .text {
    color: #ff6347;
    text-shadow: 0 0 10px #ff6347, 1px 1px 2px rgba(0, 0, 0, 0.8);
  }
  
  .label .bottom-line {
    width: 100%;
    height: 5px;
    border-radius: 999px;
    background-color: #333;
    box-shadow: 0 0 3px 0px rgba(19, 19, 19, 0.5);
    transition: all 0.2s linear;
  }
  
  .label:has(input[type="radio"]:checked) .bottom-line {
    background-color: #444;
    border-top: 1px solid #ff6347;
  }

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <div class="radio-input">
    <label class="label">
      <div class="back-side"></div>
      <input type="radio" id="value-1" name="value-radio" value="value-1" />
      <span class="text">Ignite</span>
      <span class="bottom-line"></span>
    </label>
  
    <label class="label">
      <div class="back-side"></div>
      <input type="radio" id="value-2" name="value-radio" value="value-2" />
      <span class="text">Orbit</span>
      <span class="bottom-line"></span>
    </label>
  
    <label class="label">
      <div class="back-side"></div>
      <input type="radio" id="value-3" name="value-radio" value="value-3" />
      <span class="text">Decelerate</span>
      <span class="bottom-line"></span>
    </label>
  </div>

body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      overflow: hidden;
      background-color: #000000;
  }
  .radio-input {
    display: flex;
    gap: 15px;
    background-color: #121212;
    border: 5px solid #333333;
    padding: 15px;
    border-radius: 20px;
    overflow: hidden;
    height: 140px;
  }
  
  .radio-input input {
    display: none;
  }
  
  .radio-input .label {
    width: 100px;
    height: 110px;
    background: linear-gradient(135deg, #4a4a4a, #8f8f8f);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    position: relative;
    transition: all 0.3s ease-out;
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.2), 0 0 15px rgba(0, 0, 0, 0.6);
  }
  
  .label .back-side {
    position: absolute;
    top: -12px;
    left: 0;
    background-color: #444;
    border-radius: 5px;
    width: 100%;
    height: 18px;
    box-shadow: inset 0 4px 6px rgba(0, 0, 0, 0.8),
      inset 0 -4px 8px rgba(255, 255, 255, 0.2);
    opacity: 0;
    transition: all 0.2s ease-in-out;
  }
  
  .label:has(input[type="radio"]:checked) .back-side {
    opacity: 1;
  }
  
  .label:has(input[type="radio"]:checked) {
    transform: translateY(-5px) scale(1.05);
    background: linear-gradient(135deg, #6a6a6a, #9f9f9f);
    box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.1), 0 10px 25px rgba(0, 0, 0, 0.5);
  }
  
  .label .text {
    color: #ddd;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    text-shadow: 0px 0px 6px rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease-in-out;
  }
  
  .label input[type="radio"]:checked + .text {
    color: #b0d5f2;
    text-shadow: 0 0 15px #b0d5f2, 0 0 25px rgba(0, 150, 255, 0.7);
  }
  
  .label .bottom-line {
    width: 80%;
    height: 6px;
    border-radius: 999px;
    background-color: #383838;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.7);
    transition: all 0.3s ease-out;
  }
  
  .label:has(input[type="radio"]:checked) .bottom-line {
    background-color: #505050;
    border-top: 2px solid #b0d5f2;
  }

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <div class="radio-input">
    <label class="label">
      <input type="radio" id="value-1" checked="" name="value-radio" value="value-1" />
      <p class="text">Developer</p>
    </label>
    <label class="label">
      <input type="radio" id="value-2" name="value-radio" value="value-2" />
      <p class="text">Engineer</p>
    </label>
    <label class="label">
      <input type="radio" id="value-3" name="value-radio" value="value-3" />
      <p class="text">Doctor</p>
    </label>
  </div>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #121212;
}

.radio-input {
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
  align-items: center;
  padding: 20px;
  border-radius: 15px;
  background: #1a1a1a;
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.1);
}

.radio-input * {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.radio-input label {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 15px 20px;
  width: 250px;
  height: 60px;
  cursor: pointer;
  position: relative;
  background: linear-gradient(135deg, #4a4a4a, #8f8f8f);
  border-radius: 12px;
  transition: all 0.4s ease-in-out;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

/* Hover effect */
.radio-input label:hover {
  transform: scale(1.05);
  background: linear-gradient(135deg, #707070, #9e9e9e);
}

.radio-input label::before {
  position: absolute;
  content: "";
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 250px;
  height: 55px;
  z-index: -1;
  border-radius: 12px;
  background-color: #444;
  transition: all 0.3s ease;
}

/* Active state */
.radio-input .label:has(input:checked)::before {
  background-color: #2c3e50;
  border-color: #c0392b;
  height: 60px;
}

/* Text */
.radio-input .label .text {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  text-transform: capitalize;
  transition: all 0.3s ease;
}

/* Custom radio button design */
.radio-input .label input[type="radio"] {
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: #202030;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}

/* Checked state */
.radio-input .label input[type="radio"]:checked {
  background-color: #c0392b;
  box-shadow: 0 0 8px rgba(192, 57, 43, 0.7);
  -webkit-animation: pulse 0.7s forwards;
  animation: pulse 0.7s forwards;
}

/* Button inner circle on check */
.radio-input .label input[type="radio"]:before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #fff;
  transition: all 0.2s ease;
  transform: scale(0);
}

.radio-input .label input[type="radio"]:checked::before {
  transform: scale(1);
}

/* Animation for the radio button */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.2);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

/* Text change on checked */
.radio-input .label input[type="radio"]:checked ~ .text {
  color: #c0392b;
  font-size: 20px;
  font-weight: 700;
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <div class="radio-input">
    <label class="label">
      <input type="radio" id="value-1" checked="" name="value-radio" value="value-1" />
      <i class="fas fa-fire icon"></i>
      <p class="text">Ignite</p>
    </label>
    <label class="label">
      <input type="radio" id="value-2" name="value-radio" value="value-2" />
      <i class="fas fa-rocket icon"></i>
      <p class="text">Orbit</p>
    </label>
    <label class="label">
      <input type="radio" id="value-3" name="value-radio" value="value-3" />
      <i class="fas fa-leaf icon"></i>
      <p class="text">Nature</p>
    </label>
  </div>
  
  <!-- Add FontAwesome link -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #e0e5ec;
}

.radio-input {
  display: flex;
  flex-direction: column;
  gap: 25px;
  justify-content: center;
  align-items: center;
  padding: 25px;
  border-radius: 20px;
  background: #e0e5ec;
  box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.1), -8px -8px 15px rgba(255, 255, 255, 0.7);
}

.radio-input * {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.radio-input label {
  display: flex;
  align-items: center;
  gap: 25px;
  padding: 15px 20px;
  width: 250px;
  height: 70px;
  cursor: pointer;
  position: relative;
  background: #e0e5ec;
  border-radius: 15px;
  transition: all 0.3s ease;
  box-shadow: inset 3px 3px 5px rgba(0, 0, 0, 0.1), inset -3px -3px 5px rgba(255, 255, 255, 0.7);
}

/* Hover effect */
.radio-input label:hover {
  transform: scale(1.05);
  box-shadow: inset 5px 5px 8px rgba(0, 0, 0, 0.2), inset -5px -5px 8px rgba(255, 255, 255, 0.8);
}

/* Active state */
.radio-input .label:has(input:checked)::before {
  background-color: #d3dbe6;
  height: 70px;
  box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.1), inset -5px -5px 10px rgba(255, 255, 255, 0.8);
}

/* Text */
.radio-input .label .text {
  color: #3e4a61;
  font-size: 18px;
  font-weight: 600;
  text-transform: capitalize;
  transition: all 0.3s ease;
}

/* Custom radio button design */
.radio-input .label input[type="radio"] {
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: #e0e5ec;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
  box-shadow: inset 3px 3px 5px rgba(0, 0, 0, 0.1), inset -3px -3px 5px rgba(255, 255, 255, 0.7);
}

/* Checked state */
.radio-input .label input[type="radio"]:checked {
  background-color: #4f81ff;
  box-shadow: 0 0 10px rgba(79, 129, 255, 0.6);
  animation: pulse 0.7s forwards, glow 1s infinite alternate;
}

/* Button inner circle on check */
.radio-input .label input[type="radio"]:before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #fff;
  transition: all 0.2s ease;
  transform: scale(0);
}

.radio-input .label input[type="radio"]:checked::before {
  transform: scale(1);
}

/* Icon styling */
.radio-input .label .icon {
  font-size: 25px;
  color: #3e4a61;
  transition: transform 0.3s ease;
}

/* When selected, icon animates */
.radio-input .label:has(input:checked) .icon {
  transform: rotate(360deg);
  color: #4f81ff;
}

/* Animation for the radio button */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.2);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

@keyframes glow {
  0% {
    box-shadow: 0 0 15px rgba(79, 129, 255, 0.6);
  }
  100% {
    box-shadow: 0 0 25px rgba(79, 129, 255, 1);
  }
}

/* Text change on checked */
.radio-input .label input[type="radio"]:checked ~ .text {
  color: #4f81ff;
  font-size: 20px;
  font-weight: 700;
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">
  <div class="progress-container">
    <div class="progress-bar">
        <div class="progress-fill" id="progress"></div>
    </div>

    <div class="steps">
        <div class="step active" onclick="updateStep(1)" data-step="1"><i class="fas fa-home"></i></div>
        <div class="step" onclick="updateStep(2)" data-step="2"><i class="fas fa-car"></i></div>
        <div class="step" onclick="updateStep(3)" data-step="3"><i class="fas fa-plane"></i></div>
        <div class="step" onclick="updateStep(4)" data-step="4"><i class="fas fa-flag-checkered"></i></div>
    </div>
  </div>

body {
  margin: 0;
  padding: 0;
  font-family: 'Arial', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(135deg, #1e1e2f, #141418);
}

.progress-container {
  width: 80%;
  max-width: 500px;
  display: flex;
  align-items: center;
  position: relative;
}

.progress-bar {
  position: absolute;
  top: 30%;
  left: 2%;
  width: 98%;
  height: 8px;
  background: #333;
  transform: translateY(-50%);
  z-index: 0;
}

.progress-fill {
  height: 100%;
  width: 0%;
  background: #ff8c00;
  transition: width 0.4s ease-in-out;
}

.step {
  width: 50px;
  height: 50px;
  background: #444;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 18px;
  cursor: pointer;
  position: relative;
  z-index: 2;
  transition: transform 0.3s ease;
}

.step:hover {
  transform: scale(1.2);
  background: #ff8c00;
}

.step.active {
  background: #ff8c00;
  box-shadow: 0 0 15px rgba(255, 140, 0, 0.7);
}

.step i {
  transition: transform 0.3s ease;
}

.step.active i {
  transform: rotate(360deg);
}

.steps {
  display: flex;
  justify-content: space-between;
  width: 100%;
  position: relative;
  margin-top: -12px;
}

/* Mobile Responsive */
@media (max-width: 500px) {
  .progress-container {
      width: 90%;
  }

  .step {
      width: 40px;
      height: 40px;
      font-size: 16px;
  }
}

function updateStep(step) {
  const steps = document.querySelectorAll('.step');
  const progress = document.getElementById('progress');

  steps.forEach((s, index) => {
      if (index < step) {
          s.classList.add('active');
      } else {
          s.classList.remove('active');
      }
  });

  const stepPercentage = ((step - 1) / (steps.length - 1)) * 100;
  progress.style.width = `${stepPercentage}%`;
}

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <div class="radio-input">
    <label class="label">
      <input type="radio" id="option-1" checked="" name="radio" value="option-1" />
      <i class="fas fa-bolt icon"></i>
      <p class="text">Energy</p>
    </label>
    <label class="label">
      <input type="radio" id="option-2" name="radio" value="option-2" />
      <i class="fas fa-water icon"></i>
      <p class="text">Aqua</p>
    </label>
    <label class="label">
      <input type="radio" id="option-3" name="radio" value="option-3" />
      <i class="fas fa-wind icon"></i>
      <p class="text">Breeze</p>
    </label>
  </div>
  
  <!-- FontAwesome -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background: linear-gradient(to right, #091921, #1d2b3a);
  overflow: hidden;
}

/* Radio Input Container */
.radio-input {
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
  align-items: center;
  padding: 30px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.radio-input * {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

/* Label Design */
.radio-input label {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 15px 25px;
  width: 280px;
  height: 75px;
  cursor: pointer;
  position: relative;
  border-radius: 15px;
  transition: all 0.3s ease-in-out;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);
}

/* Neon Hover Effect */
.radio-input label:hover {
  transform: translateY(-3px);
  box-shadow: 0px 10px 25px rgba(0, 255, 255, 0.3);
}

/* Checked State */
.radio-input .label:has(input:checked) {
  background: rgba(0, 255, 255, 0.2);
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.6);
  transform: scale(1.05);
}

/* Radio Button Design */
.radio-input .label input[type="radio"] {
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: inset 0px 4px 10px rgba(0, 0, 0, 0.2);
}

/* Glow Effect on Checked */
.radio-input .label input[type="radio"]:checked {
  background: rgba(0, 255, 255, 1);
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.8);
  animation: pulse 1s infinite alternate;
}

/* Inner Circle */
.radio-input .label input[type="radio"]:before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: white;
  transform: scale(0);
  transition: all 0.3s ease-in-out;
}

.radio-input .label input[type="radio"]:checked::before {
  transform: scale(1);
}

/* Icon Styling */
.radio-input .label .icon {
  font-size: 30px;
  color: #ffffff;
  transition: transform 0.3s ease-in-out, color 0.3s ease-in-out;
}

/* Glow Effect on Selected */
.radio-input .label:has(input:checked) .icon {
  transform: rotate(45deg) scale(1.3);
  color: cyan;
  text-shadow: 0px 0px 15px rgba(0, 255, 255, 0.8);
}

/* Text Styling */
.radio-input .label .text {
  color: white;
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
  transition: all 0.3s ease-in-out;
}

/* When Selected, Change Text */
.radio-input .label input[type="radio"]:checked ~ .text {
  color: cyan;
  font-size: 22px;
  font-weight: 700;
  text-shadow: 0px 0px 15px rgba(0, 255, 255, 0.8);
}

/* Neon Pulse Effect */
@keyframes pulse {
  0% {
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.6);
  }
  100% {
    box-shadow: 0 0 25px rgba(0, 255, 255, 1);
  }
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <div class="radial-selector">
    <div class="dial">
      <label class="option" data-index="1">
        <input type="radio" name="selection" checked />
        <span class="icon"><i class="fas fa-meteor"></i></span>
        <span class="text">Blaze</span>
      </label>
  
      <label class="option" data-index="3">
        <input type="radio" name="selection" />
        <span class="icon"><i class="fas fa-sun"></i></span>
        <span class="text">Sun</span>
      </label>
  
      <label class="option" data-index="3">
        <input type="radio" name="selection" />
        <span class="icon"><i class="fas fa-atom"></i></span>
        <span class="text">Quark</span>
      </label>
  
      <label class="option" data-index="4">
        <input type="radio" name="selection" />
        <span class="icon"><i class="fas fa-bolt"></i></span>
        <span class="text">Surge</span>
      </label>
    </div>
  
    <div class="center-glow">
      <i class="fas fa-circle-notch spinning"></i>
    </div>
  </div>
  
  <!-- FontAwesome for icons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background: radial-gradient(circle at center, #040D21, #021024);
      overflow: hidden;
    }
  
    /* Main container */
    .radial-selector {
      position: relative;
      width: 250px;
      height: 250px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  
    /* Circular dial */
    .dial {
      position: absolute;
      width: 200px;
      height: 200px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      transform-origin: center;
    }
  
    /* Option buttons */
    .option {
      position: absolute;
      width: 80px;
      height: 80px;
      background: rgba(255, 255, 255, 0.15);
      backdrop-filter: blur(5px);
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      transition: transform 0.4s ease, background 0.3s;
      cursor: pointer;
    }
  
    /* Positioning the options in a circular way */
    .option:nth-child(1) { transform: rotate(0deg) translateY(-100px); }
    .option:nth-child(2) { transform: rotate(90deg) translateY(-100px); }
    .option:nth-child(3) { transform: rotate(180deg) translateY(-100px); }
    .option:nth-child(4) { transform: rotate(270deg) translateY(-100px); }
  
    /* Icons */
    .option .icon {
      font-size: 24px;
      color: white;
    }
  
    /* Text */
    .option .text {
      font-size: 14px;
      color: white;
      margin-top: 5px;
      text-transform: uppercase;
      opacity: 0.8;
    }
  
    /* Checked state (Active selection) */
    .option input {
      display: none;
    }
  
    .option:has(input:checked) {
      transform: scale(1.3);
      background: rgba(255, 255, 255, 0.3);
      box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    }
  
    .option:has(input:checked) .icon {
      color: cyan;
      text-shadow: 0px 0px 10px cyan;
    }
  
    /* Center glow effect */
    .center-glow {
      position: absolute;
      width: 100px;
      height: 100px;
      background: rgba(0, 255, 255, 0.3);
      border-radius: 50%;
      box-shadow: 0 0 20px rgba(0, 255, 255, 0.6);
      display: flex;
      justify-content: center;
      align-items: center;
    }
  
    /* Rotating glow */
    .center-glow .spinning {
      font-size: 112px;
      color: cyan;
      animation: spin 2s linear infinite;
    }
  
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    /* For tablets and smaller screens */
@media (max-width: 768px) {
  .radial-selector {
    width: 180px;
    height: 180px;
  }

  .dial {
    width: 140px;
    height: 140px;
  }

  .option {
    width: 60px;
    height: 60px;
  }

  .option:nth-child(1) { transform: rotate(0deg) translateY(-70px); }
  .option:nth-child(2) { transform: rotate(90deg) translateY(-70px); }
  .option:nth-child(3) { transform: rotate(180deg) translateY(-70px); }
  .option:nth-child(4) { transform: rotate(270deg) translateY(-70px); }

  .option .icon {
    font-size: 18px;
  }

  .option .text {
    font-size: 12px;
  }

  .center-glow {
    width: 70px;
    height: 70px;
  }

  .center-glow .spinning {
    font-size: 90px;
  }
}

/* For mobile screens */
@media (max-width: 480px) {
  .radial-selector {
    width: 140px;
    height: 140px;
  }

  .dial {
    width: 110px;
    height: 110px;
  }

  .option {
    width: 50px;
    height: 50px;
  }

  .option:nth-child(1) { transform: rotate(0deg) translateY(-55px); }
  .option:nth-child(2) { transform: rotate(90deg) translateY(-55px); }
  .option:nth-child(3) { transform: rotate(180deg) translateY(-55px); }
  .option:nth-child(4) { transform: rotate(270deg) translateY(-55px); }

  .option .icon {
    font-size: 14px;
  }

  .option .text {
    font-size: 10px;
  }

  .center-glow {
    width: 50px;
    height: 50px;
  }

  .center-glow .spinning {
    font-size: 80px;
  }
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <div class="selector">
    <label>
        <input type="radio" name="holo-select" value="bolt" checked>
        <div class="option"><i class="fas fa-bolt"></i></div>
    </label>
    <label>
        <input type="radio" name="holo-select" value="globe">
        <div class="option"><i class="fas fa-globe"></i></div>
    </label>
    <label>
        <input type="radio" name="holo-select" value="rocket">
        <div class="option"><i class="fas fa-rocket"></i></div>
    </label>
  </div>
  
  <!-- FontAwesome for icons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #0a0a0a;
  overflow: hidden;
}
.selector {
  display: flex;
  gap: 20px;
  perspective: 600px;
}
.option {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, rgba(0, 255, 255, 0.3), rgba(0, 100, 255, 0.6));
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.6);
  transform-style: preserve-3d;
  transition: transform 0.5s ease, box-shadow 0.3s ease;
  cursor: pointer;
}
.option:hover {
  transform: rotateY(20deg) rotateX(10deg) scale(1.1);
  box-shadow: 0 0 25px rgba(0, 255, 255, 0.9);
}
.option i {
  font-size: 40px;
  color: #fff;
  transition: transform 0.3s ease, color 0.3s ease;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}
.option:active {
  transform: scale(0.9);
}
input[type="radio"] {
  display: none;
}
input[type="radio"]:checked + .option {
  box-shadow: 0 0 35px rgba(0, 255, 255, 1);
  transform: scale(1.2);
  border: 3px solid #19ffb6;
  background: black;
}

input[type="radio"]:checked + .option i {
  transform: scale(1.2);
  color: #19ffb6;
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <div class="selector-container">
    <div class="selector" id="selector">
        <div class="option" data-index="1" onclick="selectOption(this)"><i class="fas fa-fire"></i></div>
        <div class="option" data-index="2" onclick="selectOption(this)"><i class="fas fa-globe"></i></div>
        <div class="option" data-index="3" onclick="selectOption(this)"><i class="fas fa-meteor"></i></div>
        <div class="option" data-index="4" onclick="selectOption(this)"><i class="fas fa-star"></i></div>
        <div class="center-glow" id="centerGlow"><i class="fas fa-circle"></i></div>
    </div>
  </div>
  
  <!-- FontAwesome for icons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: radial-gradient(circle, #0f172a, #020617);
  overflow: hidden;
}
.selector-container {
  position: relative;
  width: 250px;
  height: 250px;
}
.selector {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 30px rgba(0, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  transition: transform 0.6s ease-in-out;
}
.option {
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(0, 255, 255, 0.15);
  display: flex;
  justify-content: center;
  align-items: center;
  color: cyan;
  font-size: 24px;
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
  cursor: pointer;
  transition: transform 0.6s ease-in-out;
}
.option:hover {
  transform: scale(1.2);
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.7);
}
/* Position the options in a circular orbit */
.option:nth-child(1) { transform: translate(-90px, -90px); }
.option:nth-child(2) { transform: translate(90px, -90px); }
.option:nth-child(3) { transform: translate(-90px, 90px); }
.option:nth-child(4) { transform: translate(90px, 90px); }

.center-glow {
  width: 80px;
  height: 80px;
  background: rgba(0, 255, 255, 0.3);
  box-shadow: 0 0 40px rgba(0, 255, 255, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  color: cyan;
  border: 3px solid cyan;
  border-radius: 50%;
  position: absolute;
  transition: transform 0.6s ease-in-out, box-shadow 0.6s;
}

.center-glow i {
  animation: pulse 1s infinite linear;
}

/* Animation for the center glow */ 
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(2.2); }
  100% { transform: scale(1); }
}

let rotationAngle = 0;

function selectOption(clickedOption) {
    const centerGlow = document.getElementById('centerGlow');
    const selector = document.getElementById('selector');

    // Store the current transform position of the clicked option
    const clickedTransform = clickedOption.style.transform;
    const centerTransform = centerGlow.style.transform;

    // Rotate the whole selector slightly each time
    rotationAngle += 90;
    selector.style.transform = `rotate(${rotationAngle}deg)`;

    // Swap positions smoothly
    clickedOption.style.transform = centerTransform;
    centerGlow.style.transform = clickedTransform;

    // Swap inner HTML (icons)
    let tempHTML = clickedOption.innerHTML;
    clickedOption.innerHTML = centerGlow.innerHTML;
    centerGlow.innerHTML = tempHTML;
}

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <div class="radio-group">
    <label class="radio-button">
      <input type="radio" name="option" checked/>
      <span></span>
    </label>
    <label class="radio-button">
      <input type="radio" name="option" />
      <span></span>
    </label>
    <label class="radio-button">
      <input type="radio" name="option" />
      <span></span>
    </label>
  </div>

body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
  margin: 0;
}

.radio-group {
  display: flex;
  gap: 20px;
}

.radio-button {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.4s ease;
  position: relative;
}

.radio-button input {
  display: none;
}

.radio-button span {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #e4e4e4;
  transition: all 0.3s ease;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

/* Inactive state: gray outline and glow */
.radio-button:not(:checked) span {
  background-color: #e4e4e4;
}

.radio-button:not(:checked) {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Active state: gradient and inner circle effect */
.radio-button input:checked + span {
  background: linear-gradient(45deg, #6EC6E8, #9E4DE8); /* Gradient from light blue to deep purple */
  transform: scale(1.2);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

/* Focus effect */
.radio-button input:focus + span {
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <div class="radio-group">
    <label class="radio-button">
      <input type="radio" name="option" checked />
      <span></span>
    </label>
    <label class="radio-button">
      <input type="radio" name="option" />
      <span></span>
    </label>
    <label class="radio-button">
      <input type="radio" name="option" />
      <span></span>
    </label>
  </div>

body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #000000;
  margin: 0;
}

.radio-group {
  display: flex;
  gap: 20px;
}

.radio-button {
  width: 60px;
  height: 60px;
  border-radius: 10%;
  border: 2px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.radio-button input {
  display: none;
}

.radio-button span {
  width: 40px;
  height: 40px;
  border-radius: 10%;
  background-color: #e4e4e4;
  transition: all 0.3s ease;
}

/* Inactive state: light gray with border */
.radio-button:not(:checked) span {
  background-color: #e4e4e4;
}

/* Active state: background change and ripple effect */
.radio-button input:checked + span {
  background-color: #6EC6E8; /* Light blue */
}

.radio-button input:checked + span::after {
  content: '';
  position: absolute;
  width: 200%;
  height: 200%;
  border-radius: 10%;
  background: rgba(110, 198, 232, 05); /* Light blue ripple */
  animation: ripple 0.6s ease-out;
}

/* Ripple animation */
@keyframes ripple {
  0% {
    width: 0;
    height: 0;
    top: 50%;
    left: 50%;
    opacity: 1;
  }
  100% {
    width: 300%;
    height: 300%;
    top: -50%;
    left: -50%;
    opacity: 0;
  }
}

/* Focus effect */
.radio-button input:focus + span {
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <body class="light-theme">

    <div class="radio-group">
      <label class="radio-button">
        <input type="radio" name="option" />
        <span></span>
      </label>
      <label class="radio-button">
        <input type="radio" name="option" />
        <span></span>
      </label>
      <label class="radio-button">
        <input type="radio" name="option" />
        <span></span>
      </label>
    </div>
  
    <button class="theme-toggle" onclick="toggleTheme()">Switch Theme</button>
    </body>

body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f5f5f5; /* Default light theme */
  margin: 0;
  transition: background-color 0.3s ease;
}

.radio-group {
  display: flex;
  gap: 30px;
}

.radio-button {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.radio-button input {
  display: none;
}

.radio-button span {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #e4e4e4;
  transition: all 0.3s ease;
}

/* Inactive state for light theme */
.radio-button:not(:checked) span {
  background-color: #e4e4e4;
}

/* Active state for light theme */
.radio-button input:checked + span {
  background-color: #6EC6E8; /* Light blue */
}

/* Light theme background */
body.light-theme {
  background-color: #f5f5f5;
}

/* Dark theme background */
body.dark-theme {
  background-color: #333;
}

/* Inactive state for dark theme */
body.dark-theme .radio-button:not(:checked) span {
  background-color: #555;
}

/* Active state for dark theme */
body.dark-theme .radio-button input:checked + span {
  background-color: #FF6347; /* Tomato Red */
}

/* Button focus effect */
.radio-button input:focus + span {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

/* Toggle theme button */
.theme-toggle {
  position: absolute;
  bottom: 20px;
  background-color: #090909;
  border: 5px solid #ccc;
  padding: 10px 20px;
  color: white;
  cursor: pointer;
  border-radius: 20px;
  font-size: 16px;
  transition: background-color 0.3s ease;
}

.theme-toggle:hover {
  background-color: #45494a;
}

function toggleTheme() {
  const body = document.body;
  body.classList.toggle('light-theme');
  body.classList.toggle('dark-theme');
}

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <div class="radio-group">
    <label class="radio-button blue">
      <input type="radio" name="option" checked />
      <span></span>
    </label>
    <label class="radio-button green">
      <input type="radio" name="option" />
      <span></span>
    </label>
    <label class="radio-button pink">
      <input type="radio" name="option" />
      <span></span>
    </label>
  </div>

body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #222;
  margin: 0;
}

.radio-group {
  display: flex;
  gap: 20px;
}

.radio-button {
  width: 90px;
  height: 20px;
  border-radius: 10px;
  border: 2px solid #444;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
}

.radio-button input {
  display: none;
}

.radio-button span {
  width: 40px;
  height: 10px;
  border-radius: 10px;
  transition: all 0.3s ease;
  border: 5px solid transparent; /* Adding border */
}

/* Inactive state */
.radio-button:not(:checked) span {
  background-color: #333;
}

/* Neon blue on active */
.blue input:checked + span {
  background-color: #00FFFF; /* Neon Blue */
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
  border: 5px solid #00FFFF; /* Neon Blue border */
  width: 90px;
}

/* Neon green on active */
.green input:checked + span {
  background-color: #39FF14; /* Neon Green */
  box-shadow: 0 0 20px rgba(57, 255, 20, 0.8);
  border: 5px solid #39FF14; /* Neon Green border */
  width: 90px;
}

/* Neon pink on active */
.pink input:checked + span {
  background-color: #FF1493; /* Neon Pink */
  box-shadow: 0 0 20px rgba(255, 20, 147, 0.8);
  border: 5px solid #FF1493; /* Neon Pink border */
  width: 90px;
}

/* Focus effect */
.radio-button input:focus + span {
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.3);
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <div class="radio-group">
    <label class="radio-button">
      <input type="radio" name="option" />
      <span></span>
      <p>Option 1</p>
    </label>
    <label class="radio-button">
      <input type="radio" name="option" />
      <span></span>
      <p>Option 2</p>
    </label>
    <label class="radio-button">
      <input type="radio" name="option" />
      <span></span>
      <p>Option 3</p>
    </label>
  </div>
  
  <!-- FontAwesome for icons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
  margin: 0;
}

.radio-group {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.radio-button {
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: relative;
  left: -90%;
  transition: all 0.4s ease;
}

.radio-button input {
  display: none;
}

.radio-button span {
  width: 30px;
  height: 30px;
  background-color: #d3d3d3;
  transition: all 0.3s ease;
  border-radius: 10%;
}

/* Inactive state: geometric shape (square or triangle) */
.radio-button:not(:checked) span {
  background-color: #d3d3d3; /* Soft gray */
  border-radius: 0%;
}

/* Active state: expansion and color change */
.radio-button input:checked + span {
  background-color: #00bcd4; /* Cyan */
  border-radius: 50%; /* Expands to circle */
  transform: scale(1.2); /* Slight expansion */
}



/* Focus effect */
.radio-button input:focus + span {
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
}

/* Text label */
.radio-button p {
  position: absolute;
  top: 30%;
  left: 150%;
  transform: translate(-50%, -50%);
  color: #000000;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  opacity: 0;
  transition: all 0.3s ease;
}

/* Text label on hover */
.radio-button:hover p {
  opacity: 1;
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <div class="selection-container">
    <label class="option-card">
      <input type="radio" name="option" checked />
      <span>Option 1</span>
    </label>
    <label class="option-card">
      <input type="radio" name="option" />
      <span>Option 2</span>
    </label>
    <label class="option-card">
      <input type="radio" name="option" />
      <span>Option 3</span>
    </label>
  </div>

body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f4f4f4;
  margin: 0;
}

.selection-container {
  display: flex;
  gap: 20px;
}

.option-card {
  width: 80px;
  height: 80px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  cursor: pointer;
  font-weight: bold;
  transition: 0.3s ease;
  position: relative;
}

.option-card:hover {
  transform: scale(1.05);
}

.option-card input {
  display: none; /* Hide the radio button */
}

/* When selected, the card changes appearance */
.option-card input:checked + span {
  background: #4CAF50; /* Green */
  color: white;
  box-shadow: 0 4px 15px rgba(76, 175, 80, 0.5);
}

.option-card span {
  display: block;
  width: 100%;
  height: 100%;
  display: flex;
  font-size: 12px;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  transition: all 0.3s ease;
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <div class="card-container">
    <div class="card" onclick="flipCard(this)">
      <div class="card-inner">
        <div class="card-front">Card 1</div>
        <div class="card-back">Info 1</div>
      </div>
    </div>
    <div class="card" onclick="flipCard(this)">
      <div class="card-inner">
        <div class="card-front">Card 2</div>
        <div class="card-back">Info 2</div>
      </div>
    </div>
    <div class="card" onclick="flipCard(this)">
      <div class="card-inner">
        <div class="card-front">Card 3</div>
        <div class="card-back">Info 3</div>
      </div>
    </div>
  </div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #f4f4f9, #e0e0e8);
  margin: 0;
}

.card-container {
  display: flex;
  gap: 15px;
  padding: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

.card {
  width: 120px; /* Smaller card size */
  height: 160px; /* Smaller card size */
  perspective: 1000px;
  cursor: pointer;
}

.card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.card.flipped .card-inner {
  transform: rotateY(180deg);
}

.card-front,
.card-back {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 10px;
  text-align: center;
}

.card-front {
  background: linear-gradient(135deg, #007bff, #0056b3);
  color: white;
  font-size: 18px;
  font-weight: 600;
}

.card-back {
  background: linear-gradient(135deg, #ff5722, #e64a19);
  color: white;
  transform: rotateY(180deg);
  font-size: 14px;
}

/* Hover Effect */
.card:hover .card-front {
  background: linear-gradient(135deg, #0056b3, #007bff);
}

.card:hover .card-back {
  background: linear-gradient(135deg, #e64a19, #ff5722);
}

/* Media Queries for Mobile */
@media (max-width: 600px) {
  .card-container {
    gap: 10px;
    padding: 10px;
  }

  .card {
    width: 100px; /* Even smaller for mobile */
    height: 140px; /* Even smaller for mobile */
  }

  .card-front {
    font-size: 16px;
  }

  .card-back {
    font-size: 12px;
  }
}

@media (max-width: 400px) {
  .card {
    width: 80px; /* Very small for very small screens */
    height: 120px; /* Very small for very small screens */
  }

  .card-front {
    font-size: 14px;
  }

  .card-back {
    font-size: 10px;
  }
}

function flipCard(clickedCard) {
  const cards = document.querySelectorAll('.card');
  cards.forEach(card => {
    if (card === clickedCard) {
      card.classList.toggle('flipped');
    } else {
      card.classList.remove('flipped');
    }
  });
}

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <div class="selector-container">
    <label class="selector">
      <input type="radio" name="option" id="option1" checked />
      <span>Option 1</span>
    </label>
    <label class="selector">
      <input type="radio" name="option" id="option2" />
      <span>Option 2</span>
    </label>
    <label class="selector">
      <input type="radio" name="option" id="option3" />
      <span>Option 3</span>
    </label>
    <div class="pulsating-dot"></div>
  </div>

body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #111;
  margin: 0;
  color: #fff;
}

.selector-container {
  display: flex;
  position: relative;
  justify-content: space-between;
  width: 350px;
  padding: 20px 0;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.4);
}

.selector {
  position: relative;
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
  color: #666;
  padding: 10px;
  text-align: center;
  flex: 1;
  transition: color 0.3s ease-in-out;
}

.selector input {
  display: none; /* Hide the radio buttons */
}

.selector input:checked + span {
  color: #0ff; /* Neon glow effect */
  text-shadow: 0 0 10px #0ff;
}


.pulsating-dot {
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 15px;
  height: 15px;
  background: #0ff;
  border-radius: 50%;
  box-shadow: 0 0 15px #0ff, 0 0 30px rgba(0, 255, 255, 0.5);
  transition: transform 0.6s cubic-bezier(0.4, 1.5, 0.5, 1), box-shadow 0.3s ease-in-out;
}

function intializeRadiobuttons() {
const dot = document.querySelector('.pulsating-dot');
const options = document.querySelectorAll('input[name="option"]');

function moveDot() {
  const checked = document.querySelector('input[name="option"]:checked');
  const index = Array.from(options).indexOf(checked);
  const position = index * 120; // Adjust based on spacing

  // Ensure transition stays smooth without reset
  requestAnimationFrame(() => {
    dot.style.transform = `translateX(${position}px)`;
  });
}

options.forEach(option => option.addEventListener('change', moveDot));

// Set initial position
moveDot();
}

intializeRadiobuttons();

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <div class="pane">
    <label class="label">
        <span>On</span>
        <input id="left" class="input" name="radio" type="radio">
    </label>
    <label class="label">
        <span>Off</span>
        <input id="middle" class="input" checked="checked" name="radio" type="radio">
    </label>
    <label class="label">
        <span>Auto</span>
        <input id="right" class="input" name="radio" type="radio">
    </label>
    <span class="selection"></span>
  </div>

body{
  display: flex;
  justify-content: center;
  align-items: center;
  transform-style: preserve-3d;
  perspective: 1000px;
  background: #5a5555;
  overflow: hidden;
}

.pane {
  outline: 2px solid #f43676;
  box-shadow: 0 0 15px #f4367699, inset 0 0 10px #f4367677;
  height: 3rem;
  width: 10rem;
  border-radius: 1px;
  position: relative;
  overflow: hidden;
  transition: 0.5s ease;
}

.input {
  display: none;
}

.label {
  height: 3rem;
  width: 3.33rem;
  float: left;
  font-weight: bold;
  font-size: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #f43676;
  text-align: center;
  z-index: 1;
  cursor: pointer;
}

.selection {
  display: none;
  position: absolute;
  height: 3rem;
  width: calc(10rem / 3);
  z-index: -10;
  left: 0;
  top: 0;
  background-color: #f43676;
  box-shadow: 0 0 12px #f4367699;
  transition: .3s ease;
  border-radius: 100px;
}

.label:has(input:checked) {
  color: #121212;
}

/* Hover Effects */
.pane:has(.label:nth-child(1):hover) {
  transform: rotateY(-20deg);
}

.pane:has(.label:nth-child(3):hover) {
  transform: rotateY(20deg);
}

/* Selection Indicator */
.label:has(input:checked) ~ .selection {
  display: inline-block;
}

.label:nth-child(1):has(input:checked) ~ .selection {
  transform: translateX(calc(10rem * 0/3));
}

.label:nth-child(2):has(input:checked) ~ .selection {
  transform: translateX(calc(10rem * 1/3));
}

.label:nth-child(3):has(input:checked) ~ .selection {
  transform: translateX(calc(10rem * 2/3));
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
  <div class="selector">
    <label>
        <input type="radio" name="neon-select" value="docker" checked>
        <div class="option"><i class="fa-brands fa-docker"></i></div>
    </label>
    <label>
        <input type="radio" name="neon-select" value="windows">
        <div class="option"><i class="fa-brands fa-windows"></i></div>
    </label>
    <label>
        <input type="radio" name="neon-select" value="print">
        <div class="option"><i class="fa-solid fa-print"></i></div>
    </label>
  </div>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #0d0117;
  overflow: hidden;
}
.selector {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
label {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%; /* Makes the label fully clickable */
  cursor: pointer;
}
.option {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  transition: transform 0.4s ease, box-shadow 0.3s ease;
}
.option i {
  font-size: 30px;
  color: #fff;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
  transition: transform 0.3s ease, color 0.3s ease;
}
.option:hover {
  transform: translateY(-5px);
}
input[type="radio"] {
  display: none;
}

/* Custom colors for each button */
label:nth-child(1) .option {
  background: linear-gradient(135deg, rgba(255, 0, 150, 0.5), rgba(255, 0, 255, 0.8));
  box-shadow: 0 0 12px rgba(255, 0, 150, 0.8);
}
label:nth-child(2) .option {
  background: linear-gradient(135deg, rgba(0, 200, 255, 0.5), rgba(0, 100, 255, 0.8));
  box-shadow: 0 0 12px rgba(0, 200, 255, 0.8);
}
label:nth-child(3) .option {
  background: linear-gradient(135deg, rgba(255, 180, 0, 0.5), rgba(255, 100, 0, 0.8));
  box-shadow: 0 0 12px rgba(255, 180, 0, 0.8);
}

/* Active State */
input[type="radio"]:checked + .option {
  transform: scale(1.15);
  border: 2px solid white;
}

input[type="radio"]:checked + .option i {
  color: #fff;
  transform: scale(1.3);
}

/* Ripple Effect */
input[type="radio"]:checked + .option::before {
  content: "";
  position: absolute;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  z-index: -1;
  animation: ripple 0.6s ease-out forwards;
}

/* Matching Ripple Colors */
label:nth-child(1) input[type="radio"]:checked + .option::before {
  background: rgba(255, 0, 150, 0.2);
}
label:nth-child(2) input[type="radio"]:checked + .option::before {
  background: rgba(0, 200, 255, 0.2);
}
label:nth-child(3) input[type="radio"]:checked + .option::before {
  background: rgba(255, 180, 0, 0.2);
}

@keyframes ripple {
  0% {
      transform: scale(1);
      opacity: 0.7;
  }
  100% {
      transform: scale(2);
      opacity: 0;
  }
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
  <input type="radio" name="cyber-select" id="option1" checked>
  <input type="radio" name="cyber-select" id="option2">
  <input type="radio" name="cyber-select" id="option3">

  <div class="selector">
      <label for="option1">
          <div class="option"><i class="fa-solid fa-microchip"></i></div>
      </label>
      <label for="option2">
          <div class="option"><i class="fa-solid fa-robot"></i></div>
      </label>
      <label for="option3">
          <div class="option"><i class="fa-solid fa-satellite-dish"></i></div>
      </label>
  </div>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #030303;
  overflow: hidden;
}

.selector {
  display: flex;
  gap: 10px;
  position: relative;
  background: rgba(0, 0, 0, 0.3);
  padding: 10px;
  border-radius: 15px;
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.4);
  border: 2px solid rgba(0, 255, 255, 0.6);
}

.option {
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  background: rgba(0, 255, 255, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.option i {
  font-size: 28px;
  color: #00ffee;
  text-shadow: 0 0 8px rgba(0, 255, 255, 0.7);
  transition: color 0.3s ease, transform 0.3s ease;
}

/* Click Animation */
input[type="radio"] {
  display: none;
}

/* Selection Indicator */
.selector::before {
  content: "";
  position: absolute;
  width: 60px;
  height: 60px;
  background: rgba(0, 255, 255, 0.2);
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.7);
  transition: transform 0.3s ease-out;
  z-index: -1;
}

/* Position Indicator on Selection */
input[type="radio"]:nth-child(1):checked ~ .selector::before {
  transform: translateX(0%);
}
input[type="radio"]:nth-child(2):checked ~ .selector::before {
  transform: translateX(70px);
}
input[type="radio"]:nth-child(3):checked ~ .selector::before {
  transform: translateX(140px);
}

/* Active Effect */
input[type="radio"]:checked + .option i {
  color: #ffea00;
  transform: scale(1.2);
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
  <input type="radio" name="arc-select" id="option1" checked>
  <input type="radio" name="arc-select" id="option2">
  <input type="radio" name="arc-select" id="option3">

  <div class="selector">
      <div class="arc"></div>
      <label for="option1">
          <div class="option option1"><i class="fa-solid fa-bolt"></i></div>
      </label>
      <label for="option2">
          <div class="option option2"><i class="fa-solid fa-gem"></i></div>
      </label>
      <label for="option3">
          <div class="option option3"><i class="fa-solid fa-rocket"></i></div>
      </label>
  </div>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #0a001f;
  overflow: hidden;
}

.selector {
  position: relative;
  width: 250px;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.arc {
  position: absolute;
  width: 180px;
  height: 90px;
  border-top: 4px solid rgba(153, 50, 204, 0.8);
  border-radius: 100px 100px 0 0;
  box-shadow: 0 -10px 20px rgba(153, 50, 204, 0.6);
}

.option {
  width: 55px;
  height: 55px;
  position: absolute;
  border: 3px solid #ff33cc;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.option i {
  font-size: 26px;
  color: #ff33cc;
  transition: color 0.3s ease, transform 0.3s ease;
}

/* Unique Positioning */
.option.option1 { top: 70px; left: 10px; }
.option.option2 { top: 0px; left: 90px; }
.option.option3 { top: 70px; right: 10px; }

input[type="radio"] {
  display: none;
}

/* Selected Effect */
input[type="radio"]:checked + .option {
  transform: scale(1.2);
  box-shadow: 0 0 20px rgba(0, 191, 255, 1);
}

input[type="radio"]:checked + .option i {
  color: #00bfff;
  transform: scale(1.3);
}

/* Glowing Indicator */
.selector::before {
  content: "";
  position: absolute;
  width: 60px;
  height: 60px;
  background: rgba(0, 191, 255, 0.3);
  border-radius: 50%;
  box-shadow: 0 0 25px rgba(0, 191, 255, 1);
  transition: transform 0.3s ease-out;
  z-index: -1;
}

/* Move Indicator */
input#option1:checked ~ .selector::before {
  transform: translate(-85px, 10px);
}
input#option2:checked ~ .selector::before {
  transform: translate(-5px, -60px);
}
input#option3:checked ~ .selector::before {
  transform: translate(85px, 10px);
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
  <input type="radio" name="arc-select" id="option1">
  <input type="radio" name="arc-select" id="option2">
  <input type="radio" name="arc-select" id="option3">
  <input type="radio" name="arc-select" id="option4">
  <input type="radio" name="arc-select" id="option5">
  <input type="radio" name="arc-select" id="option6">
  <input type="radio" name="arc-select" id="option7">
  <input type="radio" name="arc-select" id="option8">
  
  
  
  <div class="selector">
      <div class="arc"></div>
      <label for="option1">
          <div class="option option1"><i class="fa-solid fa-bolt"></i></div>
      </label>
      <label for="option2">
          <div class="option option2"><i class="fa-solid fa-gem"></i></div>
      </label>
      <label for="option3">
          <div class="option option3"><i class="fa-solid fa-rocket"></i></div>
      </label>
      <label for="option4">
          <div class="option option4"><i class="fa-solid fa-heart"></i></div>
      </label>
      <label for="option5">
          <div class="option option5"><i class="fa-solid fa-star"></i></div>
      </label>
      <label for="option6">
          <div class="option option6"><i class="fa-solid fa-fire"></i></div>
      </label>
      <label for="option7">
          <div class="option option7"><i class="fa-solid fa-cloud"></i></div>
      </label>
      <label for="option8">
          <div class="option option8"><i class="fa-solid fa-snowflake"></i></div>
      </label>
  </div>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #000000;
  overflow: hidden;
}

.selector {
  position: relative;
  width: 15rem;
  height: 15rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.arc {
  width: 12rem;
  height: 12rem;
  border: 3px solid #707070;
  position: absolute;
  transform: rotate(45deg);
  z-index: -1000;
}

.option {
  width: 45px;
  height: 45px;
  position: absolute;
  border: 3px solid #f43676;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.option i {
  font-size: 20px;
  color: #f43676;
  transition: color 0.3s ease, transform 0.3s ease;
}

/* Unique Positioning */
.option.option1 {
  top: 20px;
  left: 30px;
}

.option.option2 {
  top: -40px;
  left: 95px;
}

.option.option3 {
  top: 15px;
  right: 30px;
}

.option.option4 {
  top: 165px;
  left: 30px;
}

.option.option5 {
  top: 165px;
  right: 30px;
}

.option.option6 {
  top: 225px;
  left: 95px;
}

.option.option7 {
  top: 95px;
  left: -35px;
}

.option.option8 {
      top: 95px;
      right: -35px;
}

input[type="radio"] {
  display: none;
}



/* Glowing Indicator */
.selector::before {
  content: "";
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 3px solid #cfccca;
  background: #ffffff;
  box-shadow: 0 0 25px rgb(255, 255, 255);
  transition: transform 0.3s ease-out;
  z-index: -1;
}



/* Move Indicator */
input#option1:checked~.selector::before {
  transform: translate(-98px, -108px);
  border-radius: 10px;
}

input#option2:checked~.selector::before {
  transform: translate(-32px, -168px);
  border-radius: 10px;
}

input#option3:checked~.selector::before {
  transform: translate(32px, -113px);
  border-radius: 10px;
}

input#option4:checked~.selector::before {
  transform: translate(-98px, 38px);
  border-radius: 10px;
}

input#option5:checked~.selector::before {
  transform: translate(32px, 37px);
  border-radius: 10px;
}

input#option6:checked~.selector::before {
  transform: translate(-32px, 98px);
  border-radius: 10px;
}

input#option7:checked~.selector::before {
  transform: translate(-163px, -32px);
  border-radius: 10px;
}

input#option8:checked~.selector::before {
  transform: translate(98px, -32px);
  border-radius: 10px;
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
  <div class="dial-container">
    <input type="radio" name="dial-select" id="option1" checked>
    <input type="radio" name="dial-select" id="option2">
    <input type="radio" name="dial-select" id="option3">
    <input type="radio" name="dial-select" id="option4">
    <input type="radio" name="dial-select" id="option5">
    <input type="radio" name="dial-select" id="option6">

    <div class="dial">
        <div class="indicator"></div>
    </div>
    <div class="options">
        <label for="option1">
            <div class="option option1"><i class="fa-solid fa-bolt"></i></div>
        </label>
        <label for="option2">
            <div class="option option2"><i class="fa-solid fa-gem"></i></div>
        </label>
        <label for="option3">
            <div class="option option3"><i class="fa-solid fa-rocket"></i></div>
        </label>
        <label for="option4">
            <div class="option option4"><i class="fa-solid fa-heart"></i></div>
        </label>
        <label for="option5">
            <div class="option option5"><i class="fa-solid fa-star"></i></div>
        </label>
        <label for="option6">
            <div class="option option6"><i class="fa-solid fa-fire"></i></div>
        </label>
    </div>
</div>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #080808;
  overflow: hidden;
}

.dial-container {
  position: relative;
  width: 200px;
  height: 200px;
}

.dial {
  width: 100%;
  height: 100%;
  border: 3px solid #555;
  border-radius: 50%;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.5s ease-in-out;
}

.indicator {
  width: 15px;
  height: 15px;
  background: #00ffcc;
  border-radius: 50%;
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 10px #00ffcc;
}

.options {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.option {
  width: 45px;
  height: 45px;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.option i {
  font-size: 20px;
  color: #ccc;
  transition: color 0.3s ease;
}



/* Positioning icons in a circular pattern */
.option1 { transform: rotate(-8deg) translateY(-150px); }
.option2 { transform: rotate(50deg) translateY(-115px); }
.option3 { transform: rotate(120deg) translateY(-95px); }
.option4 { transform: rotate(190deg) translateY(-100px); }
.option5 { transform: rotate(250deg) translateY(-130px); }
.option6 { transform: rotate(305deg) translateY(-150px); }

input[type="radio"] {
  display: none;
}

/* Selected Effect */
input[type="radio"]:checked + label .option {
  transform: scale(1.2);
  box-shadow: 0 0 15px rgba(0, 255, 204, 1);
}

input[type="radio"]:checked + label .option i {
  color: #00ffcc;
}

/* Rotate the dial based on selection */
#option1:checked ~ .dial { transform: rotate(0deg); }
#option2:checked ~ .dial { transform: rotate(65deg); }
#option3:checked ~ .dial { transform: rotate(120deg); }
#option4:checked ~ .dial { transform: rotate(180deg); }
#option5:checked ~ .dial { transform: rotate(240deg); }
#option6:checked ~ .dial { transform: rotate(300deg); }

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  
<div class="radio-container">
  <label class="radio">
    <input type="radio" name="choice" value="option1">
    <span class="custom-radio"></span>
    Option 1
  </label>
  <label class="radio">
    <input type="radio" name="choice" value="option2">
    <span class="custom-radio"></span>
    Option 2
  </label>
</div>

body {
  font-family: Arial, sans-serif;
  background: linear-gradient(120deg, #0a0a0a, #22262e);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.radio-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.radio {
  display: flex;
  align-items: center;
  font-size: 1.4rem;
  cursor: pointer;
}

.radio input {
  display: none;
}

.custom-radio {
  display: inline-block;
  width: 1.6rem;
  height: 1.6rem;
  margin-right: 1rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #fff, #d4d4d4);
  box-shadow: 0 0.3rem 0.6rem rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  position: relative;
}

.radio input:checked + .custom-radio {
  background: linear-gradient(135deg, #4caf50, #81c784);
  box-shadow: 0 0.5rem 4rem rgba(76, 175, 80, 01);
  transform: scale(1.5) rotate(180deg);
  border-radius: 25%;
}

.radio input:checked + .custom-radio::after {
  content: '';
  width: 0.8rem;
  height: 0.8rem;
  background: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  
<div class="radio-group">
  <label class="radio-container">
    <input type="radio" name="option" />
    <div class="radio-custom"></div>
    <span class="radio-label">Option 1</span>
  </label>
  <label class="radio-container">
    <input type="radio" name="option" />
    <div class="radio-custom"></div>
    <span class="radio-label">Option 2</span>
  </label>
</div>

body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background: radial-gradient(circle, #222831, #393e46);
  color: #eeeeee;
}

.radio-group {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.radio-container {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.radio-container input[type="radio"] {
  display: none;
}

.radio-custom {
  width: 2rem;
  height: 2rem;
  border: 0.2rem solid #00adb5;
  border-radius: 50%;
  box-shadow: 0 0 1rem rgba(0, 173, 181, 0.8);
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.radio-container input[type="radio"]:checked + .radio-custom {
  transform: scale(1.2);
  box-shadow: 0 0 2rem rgba(0, 173, 181, 1);
  background: #00adb5;
}

.radio-label {
  margin-left: 1rem;
  font-size: 1.2rem;
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  
<div class="radio-group">
  <label class="radio-container">
    <input type="radio" name="option" />
    <div class="radio-custom"></div>
    <span class="radio-label">Option 1</span>
  </label>
  <label class="radio-container">
    <input type="radio" name="option" />
    <div class="radio-custom"></div>
    <span class="radio-label">Option 2</span>
  </label>
</div>

body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background: linear-gradient(to right, #ff7e5f, #feb47b);
  color: #ffffff;
}

.radio-group {
  display: flex;
  gap: 2rem;
}

.radio-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.radio-container input[type="radio"] {
  display: none;
}

.radio-custom {
  width: 3rem;
  height: 3rem;
  border: 0.3rem solid #ffffff;
  border-radius: 50%;
  background: transparent;
  transition: all 0.3s ease;
}

.radio-container input[type="radio"]:checked + .radio-custom {
  background: radial-gradient(circle, #ffffff, #ff7e5f);
  transform: scale(1.3);
}

.radio-label {
  margin-top: 1rem;
  font-size: 1.4rem;
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
  <div class="radio-container">
    <!-- Option 1 -->
    <div class="radio-item">
        <input type="radio" name="radio-group" id="option1">
        <label for="option1">
            <i class="fa-solid fa-rocket"></i>
            <span>Launch</span>
        </label>
    </div>

    <!-- Option 2 -->
    <div class="radio-item">
        <input type="radio" name="radio-group" id="option2">
        <label for="option2">
            <i class="fa-solid fa-gem"></i>
            <span>Premium</span>
        </label>
    </div>

    <!-- Option 3 -->
    <div class="radio-item">
        <input type="radio" name="radio-group" id="option3">
        <label for="option3">
            <i class="fa-solid fa-fire"></i>
            <span>Hot</span>
        </label>
    </div>

    <!-- Option 4 -->
    <div class="radio-item">
        <input type="radio" name="radio-group" id="option4">
        <label for="option4">
            <i class="fa-solid fa-star"></i>
            <span>Star</span>
        </label>
    </div>
</div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #0f0f0f;
  font-family: 'Arial', sans-serif;
}

.radio-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.radio-item {
  position: relative;
  width: 200px;
  height: 60px;
  cursor: pointer;
}

.radio-item input[type="radio"] {
  display: none;
}

.radio-item label {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  padding-left: 20px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
}

.radio-item label::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.radio-item:hover label::before {
  left: 100%;
}

.radio-item label i {
  font-size: 24px;
  margin-right: 10px;
  color: #ccc;
  transition: color 0.3s ease;
}

.radio-item label span {
  font-size: 16px;
  color: #ccc;
  transition: color 0.3s ease;
}

/* Liquid Fill Animation */
.radio-item input[type="radio"]:checked + label::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #00ffcc, #00b3ff);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  animation: liquidFill 0.5s ease forwards;
  z-index: -1;
}

@keyframes liquidFill {
  0% {
      clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  }
  100% {
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}

/* Holographic Glow Effect */
.radio-item input[type="radio"]:checked + label {
  box-shadow: 0 0 20px rgba(0, 255, 204, 0.8), 0 0 40px rgba(0, 255, 204, 0.6);
}

.radio-item input[type="radio"]:checked + label i,
.radio-item input[type="radio"]:checked + label span {
  color: #0f0f0f;
}

/* Unique Colors for Each Option */
#option1:checked + label::after { background: linear-gradient(45deg, #ff6b6b, #ff9f43); }
#option2:checked + label::after { background: linear-gradient(45deg, #4ecdc4, #00d2d3); }
#option3:checked + label::after { background: linear-gradient(45deg, #f368e0, #ff6b6b); }
#option4:checked + label::after { background: linear-gradient(45deg, #54a0ff, #00b3ff); }

<!-- No JS code needed for this element -->

52 Radio Buttons

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code