├── .gitignore
├── delete-button
├── index.html
└── styles.css
├── loader-button
├── index.html
├── settings.svg
└── styles.css
└── share-button
├── index.html
└── styles.css
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_STORE
--------------------------------------------------------------------------------
/delete-button/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
14 |
15 |
16 |
20 |
21 | Share Button
22 |
23 |
24 |
39 |
40 |
41 |
--------------------------------------------------------------------------------
/delete-button/styles.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | }
4 |
5 | html,
6 | body {
7 | height: 100%;
8 | }
9 |
10 | body {
11 | display: grid;
12 | place-items: center;
13 | margin: 0;
14 | background: #111111;
15 | }
16 |
17 | button {
18 | display: flex;
19 | align-items: center;
20 | justify-content: center;
21 | border-radius: 10px;
22 | border: 0;
23 | background: #ff2c6c;
24 | font-size: 22px;
25 | font-weight: 400;
26 | font-family: "Euclid Circular A";
27 | color: #f9f9f9;
28 | padding: 0 0 0 24px;
29 | width: 210px;
30 | height: 64px;
31 | text-align: left;
32 | cursor: pointer;
33 | transition: 0.3s;
34 | }
35 |
36 | .button-text {
37 | flex: 0 0 120px;
38 | }
39 |
40 | .button-text::before {
41 | content: "Delete User";
42 | }
43 |
44 | .animation {
45 | position: relative;
46 | overflow: hidden;
47 | display: grid;
48 | place-items: center;
49 | width: 64px;
50 | height: 64px;
51 | scale: 1;
52 | }
53 |
54 | .can {
55 | overflow: hidden;
56 | position: relative;
57 | translate: 0 3px;
58 | width: 20px;
59 | height: 22px;
60 | border-bottom-left-radius: 5px;
61 | border-bottom-right-radius: 5px;
62 | border: 2px solid #ffffff;
63 | }
64 |
65 | .lid {
66 | position: absolute;
67 | top: 20px;
68 | left: 50%;
69 | translate: -50% 0;
70 | width: 22px;
71 | height: 2px;
72 | background: #ffffff;
73 | }
74 |
75 | @keyframes move {
76 | 75%,
77 | 100% {
78 | translate: 0 88px;
79 | }
80 | }
81 |
82 | .paper-wrapper,
83 | .shredded-wrapper {
84 | overflow: hidden;
85 | position: absolute;
86 | display: flex;
87 | top: -20px;
88 | left: 50%;
89 | margin-left: -5px;
90 | width: 10px;
91 | height: 64px;
92 | }
93 |
94 | .paper-wrapper {
95 | height: 40px;
96 | }
97 |
98 | .shredded-wrapper {
99 | top: 24px;
100 | height: 20px;
101 | justify-content: center;
102 | }
103 |
104 | .paper,
105 | .shredded {
106 | display: block;
107 | background: #ffffff;
108 | height: 20px;
109 | }
110 |
111 | .paper {
112 | width: 10px;
113 | }
114 |
115 | .shredded {
116 | margin-top: -40px;
117 | width: 2px;
118 | }
119 |
120 | .shredded::before,
121 | .shredded::after {
122 | content: "";
123 | position: absolute;
124 | z-index: 1;
125 | top: 0;
126 | width: inherit;
127 | height: inherit;
128 | background: inherit;
129 | }
130 |
131 | .shredded::before {
132 | left: -4px;
133 | }
134 |
135 | .shredded::after {
136 | right: -4px;
137 | }
138 |
139 | @keyframes fill {
140 | 0%,
141 | 20% {
142 | translate: 0 0;
143 | }
144 | 40%,
145 | 70% {
146 | translate: 0 -50%;
147 | }
148 | 90%,
149 | 100% {
150 | translate: 0 -100%;
151 | }
152 | }
153 |
154 | .filler {
155 | position: absolute;
156 | top: 100%;
157 | left: 50%;
158 | margin-left: -32px;
159 | width: 64px;
160 | height: 120%;
161 | background: #ffffff;
162 | }
163 |
164 | button:active {
165 | /* cursor: not-allowed; */
166 | opacity: 0.75;
167 | }
168 |
169 | button:active .button-text::before {
170 | content: "Deleting ...";
171 | }
172 |
173 | button:active :is(.paper, .shredded) {
174 | animation: move 1.25s linear 2 both;
175 | }
176 |
177 | button:active .filler {
178 | animation: fill 2.5s both;
179 | }
180 |
--------------------------------------------------------------------------------
/loader-button/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Loader Button
8 |
12 |
13 |
14 |
15 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/loader-button/settings.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/loader-button/styles.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --color-light: #79efff;
3 | --color-dark: #71e0ef;
4 | }
5 |
6 | html,
7 | body {
8 | height: 100%;
9 | }
10 |
11 | body {
12 | margin: 0;
13 | background: #1c1e1f;
14 | display: grid;
15 | place-items: center;
16 | }
17 |
18 | button {
19 | position: relative;
20 | overflow: hidden;
21 | transform: translateZ(0);
22 | display: flex;
23 | align-items: center;
24 | justify-content: center;
25 | gap: 12px;
26 | height: 64px;
27 | padding: 0 38px 0 30px;
28 | border: 0;
29 | border-radius: 32px;
30 | font-family: "Euclid Circular A", Poppins;
31 | font-size: 18px;
32 | font-weight: 500;
33 | background: var(--color-light);
34 | color: #0e1e25;
35 | }
36 |
37 | @keyframes loading {
38 | 0% {
39 | transform: translateX(25px);
40 | }
41 | 100% {
42 | transform: translateX(-30px);
43 | }
44 | }
45 |
46 | @keyframes spin {
47 | 100% {
48 | rotate: 1turn;
49 | }
50 | }
51 |
52 | button > :is(span, p) {
53 | position: relative;
54 | z-index: 3;
55 | }
56 |
57 | button::before,
58 | button::after {
59 | content: "";
60 | position: absolute;
61 | top: 0;
62 | left: -100%;
63 | width: 300%;
64 | height: 100%;
65 | opacity: 0;
66 | transition: opacity 0.25s;
67 | }
68 |
69 | button::before {
70 | z-index: 1;
71 | background: var(--color-light)
72 | repeating-linear-gradient(
73 | 50deg,
74 | transparent,
75 | transparent 10px,
76 | var(--color-dark) 10px,
77 | var(--color-dark) 20px
78 | );
79 | }
80 |
81 | button::after {
82 | z-index: 2;
83 | background: linear-gradient(var(--color-light) 30%, transparent 100%);
84 | }
85 |
86 | button::after {
87 | z-index: 2;
88 | }
89 |
90 | button.loading:hover::before,
91 | button.loading:hover span {
92 | animation-play-state: paused;
93 | }
94 |
95 | button.loading::before,
96 | button.loading::after {
97 | opacity: 1;
98 | }
99 |
100 | button.loading::before {
101 | animation: loading 0.6s infinite linear;
102 | }
103 |
104 | button.loading span {
105 | animation: spin 0.6s infinite linear;
106 | }
107 |
--------------------------------------------------------------------------------
/share-button/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
14 |
15 |
16 |
20 |
21 | Share Button
22 |
23 |
24 |
41 |
42 |
43 |
--------------------------------------------------------------------------------
/share-button/styles.css:
--------------------------------------------------------------------------------
1 | html,
2 | body {
3 | height: 100%;
4 | }
5 |
6 | * {
7 | box-sizing: border-box;
8 | }
9 |
10 | body {
11 | margin: 0;
12 | display: grid;
13 | place-items: center;
14 | background: #f8faff;
15 | }
16 |
17 | .button {
18 | position: relative;
19 | overflow: hidden;
20 | width: 140px;
21 | height: 50px;
22 | border-radius: 25px;
23 | border: 0;
24 | color: #f7f7f7;
25 | background: #275efe;
26 | font-family: "Euclid Circular A", "Poppins";
27 | cursor: pointer;
28 | transition: 0.2s;
29 | }
30 |
31 | .button i {
32 | font-size: 18px;
33 | }
34 |
35 | .button-text,
36 | .button-links {
37 | position: absolute;
38 | top: 0;
39 | left: 0;
40 | display: flex;
41 | align-items: center;
42 | width: 100%;
43 | height: 100%;
44 | transition: 0.3s;
45 | }
46 |
47 | .button-text {
48 | gap: 10px;
49 | justify-content: center;
50 | color: inherit;
51 | font-size: 16px;
52 | }
53 |
54 | .button-links {
55 | opacity: 0;
56 | justify-content: space-between;
57 | padding: 0 28px;
58 | transition: 0.2s;
59 | }
60 |
61 | .button-links a {
62 | translate: 0 50px;
63 | transition: 0.3s;
64 | }
65 |
66 | .button:hover {
67 | border-radius: 6px;
68 | }
69 |
70 | .button:hover .button-links a:nth-child(1) {
71 | transition-delay: 0.05s;
72 | }
73 |
74 | .button:hover .button-links a:nth-child(2) {
75 | transition-delay: 0.1s;
76 | }
77 |
78 | .button:hover .button-links a:nth-child(3) {
79 | transition-delay: 0.15s;
80 | }
81 |
82 | .button:hover .button-text {
83 | translate: 0 -100%;
84 | }
85 |
86 | .button:hover .button-links {
87 | opacity: 1;
88 | }
89 |
90 | .button:hover .button-links a {
91 | translate: 0;
92 | }
93 |
94 | .button-links i {
95 | color: #f7f7f7;
96 | }
97 |
--------------------------------------------------------------------------------