Skip to content

Commit a6e5984

Browse files
GodatcodeGodatcode
authored
Animated Submit Button
1 parent 89f2e7c commit a6e5984

File tree

2 files changed

+226
-0
lines changed

2 files changed

+226
-0
lines changed

Diff for: ‎Animated Submit Button/index.css

+204
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,204 @@
1+
@-webkit-keyframes extend {
2+
0% {
3+
width: 600px;
4+
height: 200px;
5+
border-radius: 100px;
6+
}
7+
8+
10% {
9+
width: 610px;
10+
height: 210px;
11+
background: #fff;
12+
margin-left: - 5px;
13+
margin-top: - 5px;
14+
}
15+
16+
20% {
17+
width: 600px;
18+
height: 200px;
19+
background: #6fb07f;
20+
margin-left: 0px;
21+
margin-top: 0px;
22+
}
23+
24+
100% {
25+
width: 200px;
26+
height: 200px;
27+
border-radius: 100px;
28+
margin-left: 190px;
29+
background: #6fb07f;
30+
}
31+
}
32+
33+
@keyframes extend {
34+
0% {
35+
width: 600px;
36+
height: 200px;
37+
border-radius: 100px;
38+
}
39+
40+
10% {
41+
width: 610px;
42+
height: 210px;
43+
background: #fff;
44+
margin-left: - 5px;
45+
margin-top: - 5px;
46+
}
47+
48+
20% {
49+
width: 600px;
50+
height: 200px;
51+
background: #629a70;
52+
margin-left: 0px;
53+
margin-top: 0px;
54+
}
55+
56+
100% {
57+
width: 200px;
58+
height: 200px;
59+
border-radius: 100px;
60+
margin-left: 190px;
61+
background: #79ba89;
62+
}
63+
}
64+
65+
@-webkit-keyframes disappear {
66+
0% {
67+
opacity: 1;
68+
}
69+
70+
20% {
71+
color: #f28484;
72+
}
73+
74+
100% {
75+
opacity: 0;
76+
}
77+
}
78+
79+
@keyframes disappear {
80+
0% {
81+
opacity: 1;
82+
}
83+
84+
20% {
85+
color: #44bd8b;
86+
}
87+
88+
100% {
89+
opacity: 0;
90+
}
91+
}
92+
93+
@-webkit-keyframes appear {
94+
0% {
95+
opacity: 0;
96+
}
97+
98+
70% {
99+
opacity: 0;
100+
}
101+
102+
100% {
103+
opacity: 1;
104+
}
105+
}
106+
107+
@keyframes appear {
108+
0% {
109+
opacity: 0;
110+
}
111+
112+
70% {
113+
opacity: 0;
114+
}
115+
116+
100% {
117+
opacity: 1;
118+
}
119+
}
120+
121+
html {
122+
background: #ae9e9e
123+
}
124+
125+
input,
126+
button,
127+
submit {
128+
border: none
129+
}
130+
131+
.cont {
132+
position: absolute;
133+
width: 600px;
134+
height: 18px;
135+
left: 50%;
136+
top: 50%;
137+
margin: -100px 0 0 -300px
138+
}
139+
140+
button {
141+
border-width: 1px;
142+
width: 600px;
143+
height: 200px;
144+
border-radius: 90px;
145+
background: #fff;
146+
position: absolute;
147+
border: 5px solid #3c834e;
148+
-webkit-border-radius: 90px;
149+
-moz-border-radius: 90px;
150+
-ms-border-radius: 90px;
151+
-o-border-radius: 90px;
152+
}
153+
154+
button>span {
155+
font-size: 60px;
156+
color: #6fb07f
157+
}
158+
159+
img {
160+
position: absolute;
161+
top: 0;
162+
left: 0;
163+
right: 0;
164+
bottom: 0;
165+
margin: auto;
166+
opacity: 0;
167+
border-radius: 100%;
168+
/* mix-blend-mode: luminosity;
169+
filter: brightness(0.5) invert(1) const(2.5); */
170+
scale: 0;
171+
transition-delay: 0.75s;
172+
transition-duration: 1.5s;
173+
transition-property: all;
174+
transition-timing-function: linear(0 0%, 0.22 2.1%, 0.86 6.5%, 1.11 8.6%, 1.3 10.7%, 1.35 11.8%, 1.37 12.9%, 1.37 13.7%, 1.36 14.5%, 1.32 16.2%, 1.03 21.8%, 0.94 24%, 0.89 25.9%, 0.88 26.85%, 0.87 27.8%, 0.87 29.25%, 0.88 30.7%, 0.91 32.4%, 0.98 36.4%, 1.01 38.3%, 1.04 40.5%, 1.05 42.7%, 1.05 44.1%, 1.04 45.7%, 1 53.3%, 0.99 55.4%, 0.98 57.5%, 0.99 60.7%, 1 68.1%, 1.01 72.2%, 1 86.7%, 1 100%);
175+
}
176+
177+
button:focus {
178+
/*animation*/
179+
-webkit-animation: extend 1s ease-in-out;
180+
-ms-animation: extend 1s ease-in-out;
181+
animation: extend 1s ease-in-out;
182+
-webkit-animation-fill-mode: forwards;
183+
animation-fill-mode: forwards
184+
}
185+
186+
button:focus>span {
187+
/*animation*/
188+
-webkit-animation: disappear 1s ease-in-out;
189+
-ms-animation: disappear 1s ease-in-out;
190+
animation: disappear 1s ease-in-out;
191+
-webkit-animation-fill-mode: forwards;
192+
193+
animation-fill-mode: forwards
194+
}
195+
196+
button:focus>img {
197+
/*animation*/
198+
-webkit-animation: appear 1.1s ease-in-out;
199+
-ms-animation: appear 1.2s ease-in-out;
200+
animation: appear 0.9s ease-in-out;
201+
-webkit-animation-fill-mode: forwards;
202+
animation-fill-mode: forwards;
203+
scale: 2.5;
204+
}

Diff for: ‎Animated Submit Button/index.html

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Submit</title>
7+
8+
<link rel="stylesheet" href="index.css">
9+
</head>
10+
<body>
11+
<div class="cont">
12+
<button class="btn">
13+
<span>Submit</span>
14+
<!-- <img
15+
src="https://img.freepik.com/free-vector/white-vector-check-mark-tick-circle-conceptual_90220-403.jpg"
16+
height="62" width="62"
17+
> -->
18+
<img src="https://i.cloudup.com/2ZAX3hVsBE-3000x3000.png" alt="tick" height="62" width="62">
19+
</button>
20+
</div>
21+
</body>
22+
</html>

0 commit comments

Comments
 (0)