예제 구현(git page) : https://ohikmyeong.github.io/btn_micro_interaction/
Download Button Micro-interaction using CSS & Javascript
ohikmyeong.github.io
Online Tutorials의 동영상을 보고 내 방식대로 구현해봄.
HTML
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<title>Download Button Micro-interaction using CSS & Javascript</title>
<link rel="stylesheet" type="text/css" href="./style.css"/>
<script src="./script.src.js" defer></script>
</head>
<body>
<!-- https://www.youtube.com/watch?v=iKbHdp5H3Yg -->
<div id="asBtn" role="button" tabindex="0">
<div id="in_btn-down">
<span>Download</span>
</div><!-- btn-down -->
<div id="in_bar"></div>
<div id="in_btn-comp">
<span>Complete</span>
</div>
<div id="in_check"><img src="./img/check.svg" alt="체크"></div>
</div><!-- btn -->
</body>
</html>
|
cs |
CSS
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
|
@charset "utf-8";
:root{
--bg:#222;
--f-black:#222c41;
--f-grey:#aaa;
--blue:rgb(36, 167, 255);
--gray:#444;
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{
display:flex;flex-flow:column wrap;
justify-content:center; align-items:center;
width:100%;height:100vh;
background:var(--bg);
color:var(--f-color);}
/* 버튼 전체 영역 */
#asBtn{
position:relative; overflow:hidden;
width:200px; height:60px;
background:var(--gray);
border-radius:60px;
text-align:center;color:var(--f-grey);
box-shadow:0px 5px 1rem rgba(0,0,0,.5);
cursor:pointer;
transition:
width .5s 1s linear,
height .5s 1s linear;}
#asBtn:hover{
filter:brightness(120%);}
/* 다운로드, 완료 공통 */
[id ^= "in_btn-"]{
display:flex;
justify-content:center; align-items:center;
position:relative; overflow:hidden;
width:100%;height:100%;
padding-bottom:.25em;
transition:transform .5s ease-in-out;}
[id ^= "in_btn-"] span{position:relative;pointer-events:none;}
[id ^= "in_btn-"] span::before{
content:'';display:inline-block;position:relative;
width:20px;aspect-ratio:1/1;
transform:translateY(25%);
margin-right:8px;
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
pointer-events:none;}
/* 다운로드 버튼 */
#in_btn-down{background:var(--gray);}
#in_btn-down span::before{
background-image:url(./img/download_circle.svg);}
/* 완료 버튼 */
#in_btn-comp{
background:var(--blue);
color:var(--f-black);
transition-delay:1.5s;}
#in_btn-comp span::before{
background-image:url(./img/check_circle.svg);}
/* 진행 bar */
#in_bar{
position:absolute;
top:0;left:0;
width:100%;height:100%;
background:var(--blue);
box-shadow:0px 0px 1rem rgba(0,0,0,.5);
clip-path:polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);}
/* 체크 아이콘 */
#in_check{
display:flex;justify-content:center;align-items:center;
position:absolute;
top:0;left:0;
width:60px; aspect-ratio:1/1;
background:var(--blue);
transform:scale(0);}
#in_check img{height:80%;width:auto;pointer-events:none;}
/* 💞 애니메이션 */
/* 클릭시 progressBar로 넘어갈때 */
#asBtn.step-bar{
width:440px;height:10px;}
#asBtn.step-bar #in_btn-down,
#asBtn.step-complete #in_btn-down,
#asBtn.step-final #in_btn-down{
transform:translateY(100%);}
/* 진행바 상태일땐 */
.step-bar #in_bar{
animation:make_100percent 5s 2s ease-in-out forwards;}
@keyframes make_100percent {
to{clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}}
/* progressBar 끝나고 Complete 버튼으로 넘어갈때 */
#asBtn.step-complete{
width:200px;height:60px;
background:var(--blue);
animation:shrink .5s 4.5s ease-in-out forwards;}
@keyframes shrink {
to{width:60px;}}
#asBtn.step-complete #in_btn-comp{
transform:translateY(-100%);
animation:hide_btn .5s 4s ease-in-out forwards;}
@keyframes hide_btn {
to{transform:translateY(0);}}
#asBtn.step-complete #in_check{
animation:show_check 1s 5s ease-in-out both;}
@keyframes show_check {
from{transform:scale(0);}
to{transform:scale(1);}}
|
cs |
JS
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
const asBtn = document.getElementById('asBtn');
const btn_down = document.getElementById('in_btn-down');
const in_check = document.getElementById('in_check');
btn_down.addEventListener('click',()=>{
asBtn.classList.add('step-bar');
setTimeout(when_complete,7000);
});
function when_complete(){
asBtn.classList.add('step-complete');
}
in_check.addEventListener('click',()=>{
asBtn.classList = "";
});
|
cs |
'CSS&JS > 👀Study and Copy' 카테고리의 다른 글
| VS Code가 이제 Color Bracket 기능을 기본으로 제공한다. (0) | 2021.12.14 |
|---|---|
| ECMAScript 문법 최신 추가된건 어디서 확인하나? (0) | 2021.10.27 |
| [vanilla JS] jQuery 없이 html include 하는 방법 : fetch (6) | 2021.09.02 |
| 나를 위한 메모 : git에 페이지 만들고 원격으로 push하는 초 간단 방법(윈도우) (0) | 2021.09.02 |
| [vanilla JS] 유튜브 API 없이 타이틀(제목), 썸네일, 작성자 가져오는 방법 (0) | 2021.09.02 |