Skip to content

Commit c54bd53

Browse files
thanhtaivttthanhtaivtt
committed
complete tutorial
1 parent adc8682 commit c54bd53

File tree

2 files changed

+424
-2
lines changed

2 files changed

+424
-2
lines changed

‎README.md

+293-2
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,293 @@
1-
# button-animation
2-
Create button animation (Snake style) using HTML & CSS
1+
# Create button animation (Snake style) using HTML & CSS
2+
3+
Sau khi đã tìm hiểu xong bài [tạo chuyển động animation trong CSS3](https://toidicode.com/tao-chuyen-dong-animation-trong-css3-200.html) thì bài này mình sẽ áp dụng nó vào việc code một button animation theo kiểu rắn ăn mồi cho mọi người cùng ôn lại luôn.
4+
5+
## 1. Tạo khung HTML.
6+
7+
Đầu tiên mình sẽ tạo khung HTML và các thẻ cần thiết.
8+
9+
<div class="demo-code">
10+
11+
Toidicode.com - Create button animation
12+
13+
`[Button](#)`
14+
15+
<div class="run">[Chạy Code](https://toidicode.com/live/?id=722)</div>
16+
17+
</div>
18+
19+
## 2. CSS cơ bản cho button.
20+
21+
Sau khi đã HTML khung cơ bản xong, tiếp tục mình sẽ CSS cho thẻ a ở giữa màn hình và background tối màu cho mọi người dễ nhìn.
22+
23+
<div class="demo-code">
24+
25+
body {
26+
padding: 0;
27+
margin: 0;
28+
background-color: #787878;
29+
}
30+
31+
a {
32+
position: absolute;
33+
left: 50%;
34+
top: 50%;
35+
transform: translate(-50%, -50%);
36+
background-color: #000000;
37+
padding: 20px 40px;
38+
text-decoration: none;
39+
color: white;
40+
text-transform: uppercase;
41+
box-shadow: 0 1px 3px .4px #000000;
42+
transition: all 0.3s;
43+
}
44+
45+
a:hover {
46+
box-shadow: 0 1px 7px .4px #000000;
47+
color: red;
48+
}
49+
50+
<div class="run">[Chạy Code](https://toidicode.com/live/?id=723)</div>
51+
52+
</div>
53+
54+
## 3. CSS border cho button.
55+
56+
Tiếp tục chúng ta sẽ css cho 4 thẻ span bên trong thẻ a thành border.
57+
58+
<div class="demo-code">
59+
60+
/*TOP*/
61+
a span:nth-child(1) {
62+
content: '';
63+
position: absolute;
64+
width: 100%;
65+
height: 3px;
66+
background: red;
67+
top: 0;
68+
right: 0;
69+
70+
}
71+
72+
/*Right*/
73+
a span:nth-child(2) {
74+
content: '';
75+
position: absolute;
76+
width: 3px;
77+
height: 100%;
78+
background: red;
79+
top: 0;
80+
right: 0;
81+
}
82+
83+
/*Bottom*/
84+
a span:nth-child(3) {
85+
content: '';
86+
position: absolute;
87+
width: 100%;
88+
height: 3px;
89+
background: red;
90+
bottom: 0;
91+
right: 0;
92+
}
93+
94+
/*Left*/
95+
a span:nth-child(4) {
96+
content: '';
97+
position: absolute;
98+
width: 3px;
99+
height: 100%;
100+
background: red;
101+
top: 0;
102+
left: 0;
103+
}
104+
105+
<div class="run">[Chạy Code](https://toidicode.com/live/?id=724)</div>
106+
107+
</div>
108+
109+
Tiếp theo đó chúng ta sẽ gradient màu sắc cho 4 thẻ span.
110+
111+
<div class="demo-code">
112+
113+
/*TOP*/
114+
a span:nth-child(1) {
115+
content: '';
116+
position: absolute;
117+
width: 100%;
118+
height: 3px;
119+
background: red linear-gradient(to right, black, red);
120+
top: 0;
121+
right: 0;
122+
123+
}
124+
125+
/*Right*/
126+
a span:nth-child(2) {
127+
content: '';
128+
position: absolute;
129+
width: 3px;
130+
height: 100%;
131+
background: red linear-gradient(to bottom, black, red);
132+
top: 0;
133+
right: 0;
134+
}
135+
136+
/*Bottom*/
137+
a span:nth-child(3) {
138+
content: '';
139+
position: absolute;
140+
width: 100%;
141+
height: 3px;
142+
background: red linear-gradient(to left, black, red);
143+
bottom: 0;
144+
right: 0;
145+
}
146+
147+
/*Left*/
148+
a span:nth-child(4) {
149+
content: '';
150+
position: absolute;
151+
width: 3px;
152+
height: 100%;
153+
background: red linear-gradient(to top, black, red);
154+
top: 0;
155+
left: 0;
156+
157+
}
158+
159+
<div class="run">[Chạy Code](https://toidicode.com/live/?id=725)</div>
160+
161+
</div>
162+
163+
Giờ lom đã có vẻ đẹp hơn một chút rồi đó ![laugh](https://toidicode.com/vendor/unisharp/laravel-ckeditor/plugins/smiley/images/teeth_smile.png "laugh")
164+
165+
## 4, Tạo chuyển động - animation.
166+
167+
OK, sau khi đã css cơ bản tương đối đẹp rồi giờ chúng ta sẽ tạo ra chuyển động cho nó.
168+
169+
<div class="demo-code">
170+
171+
@keyframes animationdown {
172+
from {
173+
transform: translateY(-100%);
174+
}
175+
to {
176+
transform: translateY(100%);
177+
}
178+
}
179+
180+
@keyframes animationtop {
181+
from {
182+
transform: translateY(100%);
183+
}
184+
to {
185+
transform: translateY(-100%);
186+
}
187+
}
188+
189+
@keyframes animationleft {
190+
from {
191+
transform: translateX(-100%);
192+
}
193+
to {
194+
transform: translateX(100%);
195+
}
196+
}
197+
198+
@keyframes animationright {
199+
from {
200+
transform: translateX(100%);
201+
}
202+
to {
203+
transform: translateX(-100%);
204+
}
205+
}
206+
207+
</div>
208+
209+
Phía trên là chuyển động lên xuống trái phải cho từng thẻ span, giờ chúng ta sẽ thiết lập từ thẻ span ứng với từng animation.
210+
211+
<div class="demo-code">
212+
213+
/*TOP*/
214+
a span:nth-child(1) {
215+
content: '';
216+
position: absolute;
217+
width: 100%;
218+
height: 3px;
219+
background: red linear-gradient(to right, black, red);
220+
top: 0;
221+
right: 0;
222+
animation: animationleft 2s linear 0.3s infinite;
223+
}
224+
225+
/*Right*/
226+
a span:nth-child(2) {
227+
content: '';
228+
position: absolute;
229+
width: 3px;
230+
height: 100%;
231+
background: red linear-gradient(to bottom, black, red);
232+
top: 0;
233+
right: 0;
234+
animation: animationdown 2s linear 0.3s infinite;
235+
}
236+
237+
/*Bottom*/
238+
a span:nth-child(3) {
239+
content: '';
240+
position: absolute;
241+
width: 100%;
242+
height: 3px;
243+
background: red linear-gradient(to left, black, red);
244+
bottom: 0;
245+
right: 0;
246+
animation: animationright 2s linear 0.3s infinite;
247+
}
248+
249+
/*Left*/
250+
a span:nth-child(4) {
251+
content: '';
252+
position: absolute;
253+
width: 3px;
254+
height: 100%;
255+
background: red linear-gradient(to top, black, red);
256+
top: 0;
257+
left: 0;
258+
animation: animationtop 2s linear 0.3s infinite;
259+
}
260+
261+
<div class="run">[Chạy Code](https://toidicode.com/live/?id=726)</div>
262+
263+
</div>
264+
265+
![](https://toidicode.com/filemanager/images/1/blog/create_button_animation_using_html_css.png)
266+
267+
Chuyển động đã tương đối đẹp rồi, nhưng để đẹp hơn chúng ta cần ẩn những chi tiết khi chuyển động lòi ra bên ngoài thẻ `a`. bằng cách thêm `overflow: hidden` vào thẻ `a`.
268+
269+
<div class="demo-code">
270+
271+
a {
272+
position: absolute;
273+
left: 50%;
274+
top: 50%;
275+
transform: translate(-50%, -50%);
276+
background-color: #000000;
277+
padding: 20px 40px;
278+
text-decoration: none;
279+
color: white;
280+
text-transform: uppercase;
281+
overflow: hidden;
282+
box-shadow: 0 1px 3px .4px #000000;
283+
transition: all 0.3s;
284+
285+
}
286+
287+
<div class="run">[Chạy Code](https://toidicode.com/live/?id=727)</div>
288+
289+
</div>
290+
291+
Như vậy là done, nếu bạn cần chuyển động nhanh hay chậm hơn thì bạn có thể thay đổi thời gian sao cho hợp ý bạn.
292+
293+
## 5, Demo và download thư viện.

0 commit comments

Comments
 (0)