Materiales diseño inspirado comprobar & efectos de radio clic con CSS3

Vista prévia

Descripción

Te ayuda a crear bonitas casillas de verificación y botones de radio con efectos de ondulación/onda inspirados en el diseño de materiales de Google. Construido sólo con CSS/CSS3. Creado por < a href = "https://codepen.io/msisto" target = "_ blank" rel = "noopener" > msisto .

Funcionamiento

Agregue un grupo de casillas de verificación y botones de radio en el documento.

<label>

<input type="checkbox" class="option-input checkbox" checked>

Checkbox 1
</label>

<label>

<input type="checkbox" class="option-input checkbox">

Checkbox 2
</label>

<label>

<input type="checkbox" class="option-input checkbox">

Checkbox 3
</label>

<label>

<input type="radio" class="option-input radio" name="example" />

Radio option 1
</label>

<label>

<input type="radio" class="option-input radio" name="example" />

Radio option 2
</label>

<label>

<input type="radio" class="option-input radio" name="example" />

Radio option 3
</label>

El CSS para restyle las casillas de verificación y botones de radio.

.option-input {

-webkit-appearance: none;

-moz-appearance: none;

-ms-appearance: none;

-o-appearance: none;

appearance: none;

position: relative;

top: 13.33333px;

width: 40px;

height: 40px;

-webkit-transition: all 0.15s ease-out 0;

-moz-transition: all 0.15s ease-out 0;

transition: all 0.15s ease-out 0;

background: #cbd1d8;

border: none;

color: #fff;

cursor: pointer;

display: inline-block;

outline: none;

position: relative;

margin-right: 0.5rem;

z-index: 1000;
}

.option-input:hover { background: #9faab7; }

.option-input:checked { background: #40e0d0; }

.option-input:checked::before {

width: 40px;

height: 40px;

position: absolute;

content: '\2716';

display: inline-block;

font-size: 26.66667px;

text-align: center;

line-height: 40px;
}

.option-input:checked::after {

-webkit-animation: click-wave 0.65s;

-moz-animation: click-wave 0.65s;

animation: click-wave 0.65s;

background: #40e0d0;

content: '';

display: block;

position: relative;

z-index: 100;
}

.option-input.radio { border-radius: 50%; }

.option-input.radio::after { border-radius: 50%; }

Las reglas CSS3 para crear material diseño estilo ondulación/onda efectos utilizando fotogramas clave.

@-webkit-keyframes
 click-wave { 0% {
 width: 40px;
 height: 40px;
 opacity: 0.35;
 position: relative;
}
 100% {
 width: 200px;
 height: 200px;
 margin-left: -80px;
 margin-top: -80px;
 opacity: 0.0;
}
}

@-moz-keyframes
 click-wave { 0% {
 width: 40px;
 height: 40px;
 opacity: 0.35;
 position: relative;
}
 100% {
 width: 200px;
 height: 200px;
 margin-left: -80px;
 margin-top: -80px;
 opacity: 0.0;
}
}

@-o-keyframes
 click-wave { 0% {
 width: 40px;
 height: 40px;
 opacity: 0.35;
 position: relative;
}
 100% {
 width: 200px;
 height: 200px;
 margin-left: -80px;
 margin-top: -80px;
 opacity: 0.0;
}
}

@keyframes
 click-wave { 0% {
 width: 40px;
 height: 40px;
 opacity: 0.35;
 position: relative;
}
 100% {
 width: 200px;
 height: 200px;
 margin-left: -80px;
 margin-top: -80px;
 opacity: 0.0;
}
}