Анимированные чекбоксы / Эффекты / Сниппеты Bootstrap

Версия: v1.0.1

Каталог: Сниппеты Bootstrap

Категория: Эффекты

Для Bootstrap: 3, 4

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

Язык: Английский

Уникальный ID: 106

Количество символов:

Посмотрели: 2591 раз

Помощь: установка & настройка

Прокомментировали: 0 раз

Рейтинг: 5.0 / 5 - 4 голосов

Тип лицензии: CC BY 4.0

Авторство: http://u.to/084hDQ

Информация: Пользователям

Информация: Правообладателям

Теги: Snippet, CheckBox, Bootstrap, Radio, чекбокс, Button, бутстрап, Флажки, кнопки

Поделился: BootstrapТема

Добавлено: 2015-11-29 в 20:09

Метка: 1582175803

⇄ ⇅

.radio .cr {
 border-radius: 75%;
 border-color: green;
}

.checkbox .cr .cr-icon,
.radio .cr .cr-icon {
 position: absolute;
 font-size: .8em;
 line-height: 0;
 top: 50%;
 left: 20%;
}

.radio .cr .cr-icon {
 margin-left: 0.04em;
}

.checkbox label input[type="checkbox"],
.radio label input[type="radio"] {
 display: none;
}

.checkbox label input[type="checkbox"] + .cr > .cr-icon,
.radio label input[type="radio"] + .cr > .cr-icon {
 transform: scale(3) rotateZ(-220deg);
 opacity: 0;
 transition: all .7s ease-in;
}

.checkbox label input[type="checkbox"]:checked + .cr > .cr-icon,
.radio label input[type="radio"]:checked + .cr > .cr-icon {
 transform: scale(1) rotateZ(0deg);
 opacity: 1;
}

.checkbox label input[type="checkbox"]:disabled + .cr,
.radio label input[type="radio"]:disabled + .cr {
 opacity: .5;
}
</style>

<h1>Animated colorful checkboxes without using JavaScript</h1>
 <h3>One size, different check marks</h3>
 <div class="row">
 <div class="col-md-12">
 <div class="col-md-4">
 <div class="checkbox">
 <label style="font-size: 2.5em">
 <input type="checkbox" value="" checked="checked"/>
 <span class="cr"><i class="cr-icon fa fa-check"></i></span>
 plain 
 </label>
 </div> 
 </div> 
 <div class="col-md-4">
 <div class="checkbox">
 <label style="font-size: 2.5em">
 <input type="checkbox" value="" checked="checked"/>
 <span class="cr"><i class="cr-icon fa fa-check-circle"></i></span>
 circle
 </label>
 </div>
 </div> 
 <div class="col-md-4">
 <div class="checkbox" >
 <label style="font-size: 2.5em">
 <input type="checkbox" value="" checked="checked"/>
 <span class="cr"><i class="cr-icon fa fa-check-square"></i></span>
 squared
 </label>
 </div>
 </div> 
 </div>
 </div>

<h3>Different sizes and check marks</h3>
 <div class="row">
 <div class="col-md-12">
 <div class="col-md-4">
 <div class="checkbox">
 <label style="font-size: 4.5em">
 <input type="checkbox" value="" checked="checked"/>
 <span class="cr"><i class="cr-icon fa fa-check"></i></span>
 4.5 em
 </label>
 </div>
 </div> 
 <div class="col-md-4">
 <div class="checkbox">
 <label style="font-size: 3.5em">
 <input type="checkbox" value=""/>
 <span class="cr"><i class="cr-icon fa fa-check-circle"></i></span>
 3.5 em
 </label>
 </div>
 </div> 
 <div class="col-md-4">
 <div class="checkbox">
 <label style="font-size: 2.5em">
 <input type="checkbox" value="" checked="checked"/>
 <span class="cr"><i class="cr-icon fa fa-check-square"></i></span>
 2.5 em
 </label>
 </div>
 </div> 
 </div>
 </div>
 
 <br/><br/><h2>Animated colorful radio buttons </h2> 
 <h3>single sized using different marks</h3>
 
 <div class="row">
 <div class="col-md-12">
 <div class="col-md-4">
 <div class="radio">
 <label style="font-size: 2.5em">
 empty circle
 <input type="radio" name="A" value="" checked="checked"/>
 <span class="cr"><i class="cr-icon fa fa-circle-o"></i></span>
 </label>
 </div>
 </div> 
 <div class="col-md-4">
 <div class="radio">
 <label style="font-size: 2.5em">
 checkmark
 <input type="radio" name="A" value=""/>
 <span class="cr"><i class="cr-icon fa fa-check"></i></span>
 </label>
 </div>
 </div> 
 <div class="col-md-4">
 <div class="radio">
 <label style="font-size: 2.5em">
 rounded check
 <input type="radio" name="A" value=""/>
 <span class="cr"><i class="cr-icon fa fa-check-circle"></i></span>
 </label>
 </div>
 </div> 
 </div>
 </div>

<h3>different sizes, different marks</h3>
 <div class="row">
 <div class="col-md-12">
 <div class="col-md-4">
 <div class="radio">
 <label style="font-size: 3.5em">
 <input type="radio" name="B" value="" checked="checked"/>
 <span class="cr"><i class="cr-icon fa fa-circle-o"></i></span>
 3.5 em
 </label>
 </div>
 </div> 
 <div class="col-md-4">
 <div class="radio">
 <label style="font-size: 2.5em">
 <input type="radio" name="B" value=""/>
 <span class="cr"><i class="cr-icon fa fa-check"></i></span>
 2.5 em
 </label>
 </div>
 </div> 
 <div class="col-md-4">
 <div class="radio">
 <label style="font-size: 1.5em">
 <input type="radio" name="B" value=""/>
 <span class="cr"><i class="cr-icon fa fa-check-circle"></i></span>
 1.5 em
 </label>
 </div>
 </div> 
 </div>
 </div>

</div>

BootstrapTema

Анимированные чекбоксы

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0