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

Lập trình CSS và SASS nâng cao với dự án website Landing Page

0.0 (0 đánh giá)
Tạo bởi Nguyễn Minh Chí Cập nhật lần cuối 19:44 29-10-2021 14.324 lượt xem 3 bình luận
Tác giả/Dịch giả: Nguyễn Minh Chí
Học nhanh

Danh sách bài học

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.

Tạo Button và hiệu ứng của nó cho Website Landing Page 2019 - phần 1, CSS, SASS, Front end, Landing Page, website đơn giản, tự làm website

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:

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>
<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>

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{
   
}

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

Tạo Button và hiệu ứng của nó cho Website Landing Page 2019 - phần 1, CSS, SASS, Front end, Landing Page, website đơn giản, tự làm website                                      

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;
}

Tạo Button và hiệu ứng của nó cho Website Landing Page 2019 - phần 1, CSS, SASS, Front end, Landing Page, website đơn giản, tự làm website

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;
}

Ở đâ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

Tạo Button và hiệu ứng của nó cho Website Landing Page 2019 - phần 1, CSS, SASS, Front end, Landing Page, website đơn giản, tự làm website

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

Tạo Button và hiệu ứng của nó cho Website Landing Page 2019 - phần 1, CSS, SASS, Front end, Landing Page, website đơn giản, tự làm website


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

Tạo Button và hiệu ứng của nó cho Website Landing Page 2019 - phần 1, CSS, SASS, Front end, Landing Page, website đơn giản, tự làm website                   

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;
}

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 likeshare để ủ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ê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.

Nội dung bài viết

Tác giả/Dịch giả

Khóa học

Lập trình CSS và SASS nâng cao với dự án website Landing Page

Qua khóa FRONT END CƠ BẢN , Kteam đã hướng dẫn các bạn đã có được những kiến thức cơ bản về  HTML và CSS.

Trong combo Front End 2019, chúng ta sẽ cùng nhau tìm hiểu và áp dụng những kiến thức chuyên sâu về CSS. Do kiến thức về CSS trong khóa học khá lớn và chi tiết nên Kteam đã chia làm 2 phần.

  • Phần 1: CSS và SASS Nâng Cao
  • Phần 2: Flexbox và CSS grid layouts

Ở khóa học này chúng ta sẽ cũng nhau tìm hiểu tổng quát về phần 1: CSS và SASS Nâng Cao với dự án Website Landing Page.

Bạn cũng có thể truy cập vào đường link bên dưới để xem bản PRIEVIEW của website landing page Selftaught 2019 mà chúng ta sẽ cùng thực hiện nhé! 

LANDING PAGE WEBSITE SELFTAUGHT 2019

Đánh giá

Bình luận

Để bình luận, bạn cần đăng nhập bằng tài khoản Howkteam.

Đăng nhập
Thầy Giáo Ẹc (Khoa-88-F1) đã bình luận 16:10 16-07-2021

đơn giản, dễ hiểu, cảm ơn các bạn.

giadat1999 đã bình luận 15:40 21-08-2019

Cho em hỏi là bài cơ bản là dùng 

.btn:hover,

.btn:active{}

Bài nâng cao này em thấy nó tách ra, mọi người có thể giải thích cho em được không ạ, em cảm ơn

Không có video.