Press "Enter" to skip to content

Radio Input Based Toggle Button Group with Gradient

Radio Button Group with Gradient is a CSS-only solution that converts a series of radio inputs into toggle buttons and combines them into an inline button group with gradients.

radio button toggle codepen, radio button toggle switch css, toggle radio button in html

How to make use of it:

1. Create a series of radio buttons for the button group.

<div class="radio-pillbox">
  <radiogroup>
    <div>
      <input type="radio" name="radio-group" id="js" value="JavaScript" class="first">
      <label for="js" class="radio-label">JavaScript</label>
      </input>
    </div>
    <div>
      <input type="radio" name="radio-group" id="html5" value="HTML5">
      <label for="tricky">HTML5</label>
      </input>
    </div>
    <div>
      <input type="radio" name="radio-group" id="css" value="CSS3">
      <label for="css">CSS/CSS3</label>
      </input>
    </div>
    <div>
      <input type="radio" name="radio-group" id="angularjs" value="AngularJS">
      <label for="angularjs">AngularJS</label>
      </input>
    </div>
    <div>
      <input type="radio" name="radio-group" id="jquery" value="jQuery">
      <label for="jquery">jQuery</label>
      </input>
    </div>
    <div>
      <input type="radio" name="radio-group" id="rn" value="React Native" class="last">
      <label for="rn">React Native</label>
      </input>
    </div>
  </radiogroup>
</div>

2. CSS/CSS3 Basic Rules for Button Sets.

.radio-label {
  width: 100%;
  margin-bottom: 1em;
  text-align: center;
}
.radio-pillbox {
  height: 5em;
  width: 100%;
  font-size: 1em;
  border: 0;
  border-radius: 75px;
  overflow: hidden;
  background: -webkit-linear-gradient(  100deg,  #0ef49b 0%,  #d2dc69 30%,  #faa04b 70%,  #ff5a64 100%  );
  background: -moz-linear-gradient(  100deg,  #0ef49b 0%,  #d2dc69 30%,  #faa04b 70%,  #ff5a64 100%  );
  background: -o-linear-gradient(  100deg,  #0ef49b 0%,  #d2dc69 30%,  #faa04b 70%,  #ff5a64 100%  );
  background: -ms-linear-gradient(  100deg,  #0ef49b 0%,  #d2dc69 30%,  #faa04b 70%,  #ff5a64 100%  );
  background: linear-gradient(  100deg,  #0ef49b 0%,  #d2dc69 30%,  #faa04b 70%,  #ff5a64 100%  );
  color: #000000;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.radio-pillbox radiogroup {
  height: 100%;
  width: 100%;
  display: flex;
}
.radio-pillbox radiogroup div {
  width: 100%;
  position: relative;
}
.radio-pillbox radiogroup div input {
  -webkit-appearance: inherit;
  width: 100%;
  height: 100%;
  transition: background 300ms ease-out;
  margin: 0;
  outline: 0;
  border-left: 1px solid rgba(0, 0, 0, 0.05);
}
.radio-pillbox radiogroup div input:checked {
  color: #5f6982;
  border: none;
  box-shadow: inset 0 10px 50px rgba(25, 25, 25, 0.1);
}
.radio-pillbox radiogroup .first {
  border-radius: 75px 0 0 75px;
  border-left: none;
}
.radio-pillbox radiogroup .last { border-radius: 0 75px 75px 0; }
.radio-pillbox radiogroup div label {
  position: absolute;
  top: 50%; /* top plus line-height centers text */
  line-height: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
}
.radio-pillbox input:focus { outline: 0; }
.radio-pillbox label:after {
  content: "\2714";
  display: inline-block;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -o-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transition: margin 250ms cubic-bezier(0.6, -0.28, 0.735, 0.045) 100ms,  -webkit-transform 250ms cubic-bezier(0.895, 0.03, 0.685, 0.22);
  -moz-transition: margin 250ms cubic-bezier(0.6, -0.28, 0.735, 0.045) 100ms,  -moz-transform 250ms cubic-bezier(0.895, 0.03, 0.685, 0.22);
  -o-transition: margin 250ms cubic-bezier(0.6, -0.28, 0.735, 0.045) 100ms,  -o-transform 250ms cubic-bezier(0.895, 0.03, 0.685, 0.22);
  transition: margin 250ms cubic-bezier(0.6, -0.28, 0.735, 0.045) 100ms,  transform 250ms cubic-bezier(0.895, 0.03, 0.685, 0.22);
}
.radio-pillbox input:checked + label:after {
  margin-left: 12px;
  -webkit-transform: scale(1.25);
  -moz-transform: scale(1.25);
  -o-transform: scale(1.25);
  -ms-transform: scale(1.25);
  transform: scale(1.25);
  -webkit-transition: -webkit-transform 500ms  cubic-bezier(0.175, 0.885, 0.32, 1.275) 250ms,  margin 500ms,  -webkit-transform 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 250ms;
  -moz-transition: -moz-transform 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275)  250ms,  margin 500ms,  -moz-transform 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 250ms;
  -o-transition: -o-transform 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275)  250ms,  margin 500ms,  -o-transform 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 250ms;
  transition: transform 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 250ms,  margin 500ms, transform 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 250ms;
}

radio input based toggle button group, radio button group with gradient Plugin/Github


See Demo And Download

Official Website(alexitaylor): Click Here

This superior jQuery/javascript plugin is developed by alexitaylor. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.