Кнопка с круглым индикатором / Кнопки / Сниппеты Bootstrap

Версия: v1.0.1

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

Категория: Кнопки

Bootstrap: 3, 4

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

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

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

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

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

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

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

Рейтинг: 4.3 / 5 - 11 голосов

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

Авторство: Посмотреть

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

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

Теги: эффект, Snippet, Effect, сниппет, Bootstrap, Responsive, html, Button, адаптивные, кнопки

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

Добавлено: 2017-02-24 в 15:56

Метка: 1567148805

⇄ ⇅

.btncontent {
 width: 300px;
 height: 285px;
 margin: 0 auto;
}
.btnbg {
 width: 240px;
 height: 240px;
 margin: 0 auto;
 border-radius: 240px;
 box-shadow: 0 2px 2px rgba(255, 255, 255, .5), inset 0 2px 12px rgba(0, 0, 0, .2);
 background: linear-gradient(to bottom, #d2d2d2 0%, #efefef 100%);
 position: relative;
}
.btnshape {
 position: absolute;
 top: 20px;
 left: 20px;
 width: 200px;
 height: 200px;
 border-radius: 200px;
 background: linear-gradient(to bottom, #d2d2d2 0%, #efefef 100%);
 box-shadow: 0 35px 40px rgba(0, 0, 0, .2), 0 20px 40px rgba(0, 0, 0, .1), 0 8px 12px rgba(0, 0, 0, .35), inset 0 2px 2px rgba(255, 255, 255, 1), inset 0 -10px 25px rgba(0, 0, 0, .18);
}
.btn {
 position: absolute;
 top: 60px;
 left: 60px;
 width: 120px;
 height: 120px;
 border-radius: 120px;
 box-shadow: 0 2px 2px rgba(255, 255, 255, .75), inset 0 4px 20px rgba(0, 0, 0, .1);
 background: linear-gradient(#40a063 0%, #4fca82 100%);
}
.btntxt {
 color: #fff;
 font-size: 30px;
 text-transform: uppercase;
 display: inline-block;
 width: 120px;
 text-align: center;
 position: absolute;
 top: 107px;
 left: 60px;
 line-height: 0.95;
 word-spacing: -5px;
 text-shadow: #1a822c 0px 2px 0px;
}
</style>

<div class="btncontent">
 <div class="btnbg" style="cursor: pointer;">
 <svg version="1.1" id="animation" xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 220 220"
 enable-background="new 0 0 220 220" xml:space="preserve">
 <path fill="none" stroke="#1a822c" stroke-width="20" stroke-miterlimit="10" d="M110,10c55.2,0,100,44.8,100,100s-44.8,100-100,100
 S10,165.2,10,110S54.8,10,110,10"
 style="-webkit-transition: stroke-dashoffset 5s ease-in-out; transition: stroke-dashoffset 5s ease-in-out; stroke-dasharray: 628.357360839844px, 628.357360839844px; stroke-dashoffset: 0px;">
 </path>
 </svg>
 <div class="btnshape"></div>
 <div class="btn"></div>
 <span class="btntxt">START</span>
 </div>
 </div>

</div>
</div>
</div>

function animatePath(path) {
 var length = path.getTotalLength();
 path.style.transition = path.style.WebkitTransition =
 'none';
 path.style.strokeDasharray = length + ' ' + length;
 path.style.strokeDashoffset = length;
 path.getBoundingClientRect();
 path.style.transition = path.style.WebkitTransition =
 'stroke-dashoffset 5s ease-in-out';
 path.style.strokeDashoffset = '0';
 }

function afterPathAnimation() {
 var text = document.querySelector('.btntxt');
 text.style.color = 'white';
 text.style.textShadow = '0 2px 0 rgba(29,146,49,1)';
 var btn = document.querySelector('.btn');
 btn.style.background = 'linear-gradient(to bottom, rgba(57,142,88,1) 0%, rgba(59,196,116,1) 100%)';
 var btn_base = document.querySelector('.btnbg');
 btn_base.style.cursor = 'pointer';

animateBg(btn);
 }

var path = document.querySelector('path');
 path.addEventListener("transitionend", afterPathAnimation, false);

animatePath(path);
 });
 </script>

BootstrapTema

Кнопка с круглым индикатором

Скриншот

Подробнее

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

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

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