Grupo de botón de alternancia basado en entrada de radio con CSS puro

Vista prévia

Descripción

Una solución sólo CSS que convierte una serie de entradas de radio en botones de alternancia y los agrupa en un grupo de botón alineado con degradados.

Funcionamiento

Crear una serie de botones de radio para el grupo de botón.

<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>

Las reglas principales de CSS/CSS3 para el grupo de botones.

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