Tạo Button và hiệu ứng của nó cho Website Landing Page 2019

Dẫn nhập

Ở bài học trước chúng ta đã hoàn thành việc TẠO VIỀN CONG CHO BACKGROUND - IMAGE SỬ DỤNG CLIP PATH.

Trong bài học này chúng ta sẽ cùng nhau Tạo button và hiệu ứng của nó.

Nội dung

Để tiếp thu tốt kiến thức bài này bạn cần:

• Nắm vững kiến thức CSS cơ bản.
• Đã thực hành qua bài TẠO HEADER CƠ BẢN CHO PROJECT LANDING PAGE
• Đã thực hành qua bài TẠO VIỀN CONG CHO BACKGROUND - IMAGE SỬ DỤNG CLIP PATH.

Trong bài này chúng ta cùng tìm hiểu:

• Code CSS Giao diện cho button
• Code hiệu ứng active cho button

Code CSS Giao diện cho button

Tua trở lại bài 1 TẠO HEADER CƠ BẢN CHO PROJECT LANDING PAGE, chúng ta đã code HTML cho button header.

• Nằm trong div .text-box:

<a href="#" class="btn btn-white btn-animated">See our courses</a>
1

<div class="text-box">
   <h3 class="heading-primary">
       <span class="heading-primary__main">
        selftaught
       </span>
       <span class="heading-primary__sub">
         is how you survive
       </span>
   </h3>
   <a href="#" class="btn btn-white btn-animated">See our courses</a> <!-- add this -->
</div>
1
2
3
4
5
6
7
8
9
10
11
12

Trước tiên ta sẽ tạo các thuộc tính chung cho button bằng cách code CSS cho .btn

.btn,
.btn:link,
.btn:visited{
   
}
1
2
3
4
5
6

Trong đó:

• :link là thẻ a bình thường, chưa được user click
• :visited là thẻ a (link) đã được user click )

Quan sát lại button ở sản phẩm hoàn thiện

Ta có thể thấy :

• Là thẻ a nên có text-decoration default của thẻ a nên ta để: text-decoration: none;
• Chữ button in hoa: text-transform: uppercase;
• Border radius tròn ở hai đầu: border-radius: 100px;  ở đây giá trị border-radius để rất lớn sẽ tạo được hiệu ứng tròn 2 đầu. (1000px với 100px không có gì khác biệt)
• Tiếp theo là set padding cho button nhưng để làm điều đó trước hết chúng ta phải set: display: inline-block; 
• Ở đây ta để: padding: 15px 30px ; 
• Font-size ta để 16px: font-size: 16px; 

Code CSS

.btn,
.btn:link,
.btn:visited{
    text-transform: uppercase;
    text-decoration: none;
    padding: 15px 40px;
    display: inline-block;
    border-radius: 100px;
    font-size: 16px;
}
1
2
3
4
5
6
7
8
9
10
11

Ta tiếp tục chỉnh background color và màu button’s text bằng chỉnh CSS của .btn-white

• Chỉnh background mày trắng (#ffffff)
• Màu text là màu xám (#777777)

.btn-white{
    color: #777777;
    background-color: #fff;
}
1
2
3
4
5

Ở đây ta thấy vị trí của button không nằm ở giữa. Ta sử dụng text-align: center; cho .text-box

Ta được hình ảnh button mong muốn

Code hiệu ứng active của button

KHI HOVER( lướt vào, trỏ vào)

Ta muốn khi hover button có nhích lên trên 1 chút và có shadow khi hover nó, ta chỉnh CSS của .btn:hover

• Để nhích lên sử dụng transform: translateY(-3px);
• Để có shadow ta sử dụng box-shadow: 0 5px 20px rgba(0,0,0, .2); Ở đây ta muốn có màu shadow là transparent nên sử dụng màu rgba

box-shadow: offset ngang/ offset dọc/ độ mờ / màu shadow

Chú ý: Đây hoàn toàn là các thông số sử dụng cá nhân, bạn có thể thay đổi sao cho thích hợp VD: translateY(-10px); …)

KHI ACTIVE( khi click)

Khi active, button nhún xuống ta tiếp tục sử dụng các thuộc tính CSS trong .btn:active

• transform: translateY(-1px);
• box-shadow: 0 5px 10px rgba(0,0,0, .2);

Nếu trường hợp bạn click xuất hiện viền xanh bên ngoài thì đó chính là outline (cũng tùy browser nữa) nên để chắc mình set thêm

• outline: none;

Vậy là chúng ta đã xong hiệu ứng active của button

Code CSS

.btn,
.btn:link,
.btn:visited{
    text-transform: uppercase;
    text-decoration: none;
    padding: 15px 40px;
    display: inline-block;
    border-radius: 100px;
    font-size: 16px;
}

.btn:hover{
    transform: translateY(-3px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, .2);
}

.btn:active{
    outline: none;
    transform: translateY(-1px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
}
.btn-white{
    color: #777777;
    background-color: #fff;
}
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

Kết luận

Ở bài này chúng ta đã xây dựng xong giao diện và hiệu ứng active chobutton của website landing page

Trong bài sau chúng ta sẽ cùng nhau TẠO HIỆU ỨNG ZOOM OUT, ZOOM IN CỦA BUTTON KHI HOVER.

Cảm ơn các bạn đã theo dõi bài viết. Hãy để lại bình luận và góp ý của mình để giúp phát triển bài viết tốt hơn. Đừng quên: "Luyện tập – Thử thách – Không ngại khó".

---

Tải xuống

Tài liệu

Nhằm phục vụ mục đích học tập Offline của cộng đồng, Kteam hỗ trợ tính năng lưu trữ nội dung bài học Tạo Button và hiệu ứng của nó cho Website Landing Page 2019 dưới dạng file PDF trong link bên dưới.

Ngoài ra, bạn cũng có thể tìm thấy các tài liệu được đóng góp từ cộng đồng ở mục TÀI LIỆU trên thư viện Howkteam.com

Đừng quên like và share để ủng hộ Kteam và tác giả nhé!

Project

Nếu việc thực hành theo hướng dẫn không diễn ra suôn sẻ như mong muốn. Bạn cũng có thể tải xuống PROJECT THAM KHẢO ở link bên dưới!

Thảo luận

Nếu bạn có bất kỳ khó khăn hay thắc mắc gì về khóa học, đừng ngần ngại đặt câu hỏi trong phần BÌNH LUẬN bên dưới hoặc trong mục HỎI & ĐÁP trên thư viện Howkteam.com để nhận được sự hỗ trợ từ cộng đồng.

CỘNG ĐỒNG HỎI ĐÁP HOWKTEAM.COM

GROUP THẢO LUẬN FACEBOOK