Creative Radio Buttons

admin1234
Jan 30, 2026 4
Live Preview

Live Editor

<div class="radio-cards">

  <label>
    <input type="radio" name="plan" checked>
    <div class="card">
      <div class="icon">🌱</div>
      <div class="title">Basic</div>
      <div class="desc">For starters</div>
    </div>
  </label>

  <label>
    <input type="radio" name="plan">
    <div class="card">
      <div class="icon">🚀</div>
      <div class="title">Pro</div>
      <div class="desc">Growing teams</div>
    </div>
  </label>

  <label>
    <input type="radio" name="plan">
    <div class="card">
      <div class="icon">🏆</div>
      <div class="title">Enterprise</div>
      <div class="desc">At scale</div>
    </div>
  </label>

</div>
body{
  margin:0;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background:#020617;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  color:#fff;
}

/* group */
.radio-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

/* hide native */
.radio-cards input{
  display:none;
}

/* card */
.card{
  padding:22px 24px;
  border-radius:20px;
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(14px);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.18),
    0 20px 50px rgba(0,0,0,.4);
  cursor:pointer;
  transition:.35s cubic-bezier(.22,1,.36,1);
  position:relative;
  overflow:hidden;
}

/* icon */
.icon{
  font-size:28px;
  margin-bottom:10px;
  opacity:.7;
  transition:.35s;
}

/* text */
.title{
  font-size:16px;
  font-weight:600;
}
.desc{
  font-size:13px;
  opacity:.7;
}

/* hover */
.card:hover{
  transform:translateY(-6px);
  box-shadow:
    0 30px 80px rgba(0,0,0,.6),
    inset 0 0 0 1px rgba(139,92,246,.5);
}

/* selected */
input:checked + .card{
  transform:translateY(-8px) scale(1.03);
  box-shadow:
    0 0 0 2px #8b5cf6,
    0 0 40px rgba(139,92,246,.8);
}

/* glowing accent */
.card::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:radial-gradient(circle,#8b5cf6,transparent 60%);
  opacity:0;
  transition:.35s;
}

input:checked + .card::before{
  opacity:.35;
}

/* icon pop */
input:checked + .card .icon{
  opacity:1;
  transform:scale(1.2);
}
Categories

Creative Radio Buttons

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
