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 Views 164 #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

CSS Properties Used

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

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