True / False Radio Buttons by admin

1 Add to Favorites

HTML Code
CSS Code

<div class="container">
  <div class="wrap">
    <input type="radio" id="true-option" name="true-or-false">
    <label class="input-wrap true-wrap" for="true-option">
      <label>TRUE</label>
      <div class="check">
        <svg x="0px" y="0px" viewBox="156 -206 512 512" enable-background="new 156 -206 512 512" xml:space="preserve">
          <circle class="circle" fill="none" stroke="#000000" stroke-width="37" stroke-miterlimit="10" cx="412" cy="50" r="226" />
        </svg>
        <div class="inner">
          <svg version="1.1" x="0px" y="0px" viewBox="156 -206 512 512" enable-background="new 156 -206 512 512" xml:space="preserve">
            <polygon points="540,-78 380,82 284,-14 220,50 380,210 604,-14 " />
          </svg>
        </div>
      </div>
    </label>
  </div>
  <div class="wrap right">
    <input type="radio" id="false-option" name="true-or-false">
    <label class="input-wrap false-wrap" for="false-option">
      <label>FALSE</label>
      <div class="check">
        <svg x="0px" y="0px" viewBox="156 -206 512 512" enable-background="new 156 -206 512 512" xml:space="preserve">
          <circle class="circle" fill="none" stroke="#000000" stroke-width="37" stroke-miterlimit="10" cx="412" cy="50" r="226" />
        </svg>
        <div class="inner">
          <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="115 -250 600 600" enable-background="new 115 -250 600 600" xml:space="preserve">
            <path d="M286.5,238.3L412,112.8l125.5,125.5l62.8-62.8L474.8,50L600.3-75.5l-62.8-62.8L412-12.8L286.5-138.3l-62.8,62.8L349.3,50
                  L223.8,175.5L286.5,238.3z" />
          </svg>
        </div>
      </div>
    </label>
  </div>
</div>

.container {
  width: 500px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}

.label-name {
  line-height: 2em;
  vertical-align: center;
}

.input-wrap {
  cursor: pointer;
  width: 230px;
  float: left;
  padding: 25px;
  padding-left: 12px;
  font-family: sans-serif;
  position: relative;
  user-select: none;
  background: white;
  margin-right: 5px;
  border-radius: 5px;
  transition: all 0.3s;
  border: 4px solid grey;
}
.input-wrap:hover {
  background: #152c32;
}
.input-wrap:active {
  background: #152c32;
}
.input-wrap label {
  padding-left: 70px;
  color: grey;
  width: 100%;
  transition: all 0.3s;
  font-size: 1.3em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.125em;
  pointer-events: none;
}

.true-wrap, .false-wrap {
  box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.3);
}

input[type=radio] {
  -webkit-appearance: none !important;
  outline: none !important;
  background: none;
  border: none;
  display: none;
}

.check {
  display: block;
  border: none !important;
  height: 45px;
  width: 45px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.check svg .circle {
  stroke: grey;
  stroke-width: 40;
}
.check .inner {
  display: block;
  border-radius: 10%;
  height: 35px;
  width: 35px;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 5px;
  transform: translateY(-20%);
  transition: all 0.3s;
}

.wrap {
  float: left;
}
.wrap.right {
  float: right;
}

.wrap input[type=radio]:checked ~ .input-wrap .inner {
  opacity: 1;
  transform: translateY(-50%);
}

.wrap input[type=radio]:checked ~ .true-wrap {
  border-color: #00ffc4;
  background: #0A5E44;
  box-shadow: 0px 2px 10px #0a5e44;
}
.wrap input[type=radio]:checked ~ .true-wrap label {
  color: #00ffc4;
}
.wrap input[type=radio]:checked ~ .true-wrap .check svg .circle {
  stroke: #00ffc4;
}
.wrap input[type=radio]:checked ~ .true-wrap .check .inner {
  fill: #00ffc4;
}

.wrap input[type=radio]:checked ~ .false-wrap {
  box-shadow: 0px 2px 10px #4f1111;
  background: #4F1111;
  border-color: #ff006a;
}
.wrap input[type=radio]:checked ~ .false-wrap label {
  color: #ff006a;
}
.wrap input[type=radio]:checked ~ .false-wrap .check svg .circle {
  stroke: #ff006a;
}
.wrap input[type=radio]:checked ~ .false-wrap .check .inner {
  fill: #ff006a;
}

Uploaded: 13th July 2024

Tags: #select, #option, #true, #false, #black

CSSPortal

( admin )

We share content found online. We don't claim credit of anything posted here. If you see your work, let us know and we can move it to your account.

•Member since: 25th June 2024

•Website•X (Twitter)

CSS Properties Used

There are 33 CSS properties used in the above example. Click to view and learn about each property.

width position top left transform line-height vertical-align cursor float padding padding-left font-family user-select background margin-right border-radius transition border color font-size font-weight text-transform letter-spacing pointer-events box-shadow outline display height stroke stroke-width opacity border-color fill

HTML Tags Used

There are 9 HTML Tags used in the above example. Click to view and learn about each tag.

html body div input label svg circle polygon path