Radio Input Based Toggle Button Group With Pure CSS

Author
In CSS Tutorial Dec 15, 2017
Radio Input Based Toggle Button Group With Pure CSS

A CSS only solution that converts a series of radio inputs into toggle buttons and groups them in an inline button group with gradients.

How to use it:

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>

The primary CSS/CSS3 rules for the button group.

.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; }

The post Radio Input Based Toggle Button Group With Pure CSS appeared first on CSS Script.

 

Leave a Reply

Your email address will not be published. Required fields are marked *