Кнопка Press & Hold

<!--Кнопка Press & Hold-->
<!--https://mt-webdesign.ru/press-hold-->
<div class="bg"></div>
<div class="drag">
<div class="drag-container">
<div class="drag-button" id="btn"></div>
<div class="drag-line"></div>
<div class="drag-target"></div>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.5/gsap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.5/Draggable.min.js'></script><script src="./script.js"></script>
<script>
var dragBtn = $('.drag-button');
var dragTgt = $('.drag-target');
var overlap = '50%';
Draggable.create(dragBtn, {
type: 'x',
bounds: '.drag-container',
onDrag: function(e) {
if( this.hitTest(dragTgt, overlap) ) {
$(this.target).addClass('in-range');
} else {
$(this.target).removeClass('in-range');
}
},
onDragEnd: function(e) {
var endPos = $(this.target).parent().width() - 32 + 'px';
if( $(this.target).hasClass('in-range') ) {
$(this.target).addClass('in-target');
gsap.to(this.target, {duration: 0.2, x: endPos});
gsap.to('.drag', {duration: 0.5, autoAlpha: 0, delay: 0.5});
gsap.to('.uc-over', {duration: 0.5, autoAlpha: 0, delay: 0.5});
setTimeout(function() {
$('.bg').addClass('drag-success');
gsap.to('.content', {duration: 0.5, display:"block", y: 0, autoAlpha: 1, delay: 0.5});
}, 1000);
} else {
gsap.to(this.target, {duration: 0.2, x: 0});
}
}
});
$(".drag").appendTo(".drag-container .tn-atom");
$(".t-records").addClass("content");
$(".uc-hold").appendTo(".t-body");
</script>

<style>
/*____________________________________________________*/
:root {
/*Настройки кнопки*/
--BGTransitionColor: #F6F6EB; /*цвет фона при переходе*/
--DragImg: url(https://static.tildacdn.com/tild3363-3164-4435-a434-653633316437/Group_338.svg); /*изображение на ползунке*/
--DragColor: #FFFFFF; /*цвет ползунка*/
--DragColorHover: #FFFFFF; /*цвет ползунка при наведении*/
--LineColor: #FFFFFF; /*цвет линии пути*/
--BorderColor: #FFFFFF; /*цвет обводки круга*/
}
/*___________________________________________________*/
/*Ниже не трогать*/
body {
background: var(--BGTransitionColor);
}
.bg.drag-success:after {
opacity: 1;
}
.uc-hold .t396__artboard {
position: fixed;
}
.drag {
position: absolute;
top: 0;
left: 0;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.drag-container {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
width: 280px;
height: 60px;
margin-bottom: 10px;
}
.drag-button, .drag-target {
width: 40px;
height: 40px;
border-radius: 100%;
}
.drag-target {
width: 60px;
transform: translate3d(20px, 0px, 0px);
height: 60px;
opacity:0.8;
border: 1px solid var(--BorderColor);
}
.drag-button {
background: var(--DragColor);
background-size: cover;
background-image: var(--DragImg);
transition: background-color 0.2s ease-in-out;
transform: translate3d(0px, 0px, 0px);
border: 1px solid transparent;
}
.drag-button:hover, .drag-button:active, .drag-button.in-target {
background-color: var(--DragColorHover);
}
.drag-line {
position: absolute;
top: 50%;
right: 60px;
width: calc(100% - 120px);
height: 1px;
background-image: linear-gradient(to right, #00000000 80%, var(--LineColor) 20%);
background-position: top;
background-size: 10px 1px;
background-repeat: repeat-x;
}
.content {
display: none;
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
transform: translateY(0px);
}
</style>