Radio Buttons - WebDevTales

10 Radio Buttons

Modern, responsive Radio Buttons for sleek UI design

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!

  
<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 -->

10 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