Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Cách Tạo Read More Button CSS Javascript

Cách Tạo Read More Button CSS Javascript


Ngày 28 Tháng 10 Năm 2021

Ngày hôm nay chúng ta sẽ cùng nhau đi vào tìm hiểu cách tạo hiệu ứng read more button bằng html, css và javascript cho thiết kế và phát triển website nha.

Cách Tạo Read More Button

Đầu tiên chúng ta sẽ đi vào tạo cấu trúc HTML cho read more button thông qua đoạn code dưới đây nha:

HTML:

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Read More Button</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
  <div class="container">
  <h2>Tiêu Đề Bài Viết</h2>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry
  <span class="dots">...</span>
  <span class="more-content">
        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
  </span>
  <button class="read-more">Read More</button>
</div>
</body>
</html>

CSS:

Tiếp theo chúng ta sẽ đi vào sử dụng các thuộc tính CSS cơ bản để thiết lập style cho hiệu ứng read more thông qua đoạn mã dưới đây nha:

body{
   background-color: #0f2e51;
   padding: 0;
   margin: 0;
}
h2{
   color: #fff;
   font-size: 28px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 1.5px;
}
.more-content{
   display: none;
}
.container{
   color: #e5e5e5;
   font-size: 18px;
   text-align: justify;
   line-height: 25px;
   font-family: 'Work Sans',sans-serif;
  margin: 15px;
}
.container:not(:last-child){
   margin-bottom: 30px;
}
button{
   margin-top: 15px;
   display: block;
   background-color: #e41d3f;
   color: white;
   border:none;
   outline: none;
   padding: 8px 20px;
   text-transform: capitalize;
   cursor: pointer;
   font-size: 20px;
}

Và kết quả bạn xem hình ảnh dưới đây nha:

Read more button css

Javascript:

Phần cuối cùng chúng ta sẽ đi vào thiết lập Jquery để tạo chức năng đọc thêm hay ẩn bớt thông qua đoạn code bên dưới nha.

$(document).ready(function(){
   $(".read-more").click(function(){
      $(this).prev().toggle();
      $(this).siblings('.dots').toggle();
      if($(this).text()=='Read More'){
$(this).text('Read Less');
      }
      else{
$(this).text('Read More');
      }
   });
});

Và kết quả cuối cùng bạn xem video dưới đây nha.

Còn dưới đây là dự án trên Codepen nha.

See the Pen read more button by haycuoilennao19 (@haycuoilennao19) on CodePen.

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn hiệu ứng đọc thêm hữu ích cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!

author image

Mình là Thái Viết Nhật. Mình có ước mơ là có thể làm các bài giảng miễn phí và chia sẻ những bài viết, công cụ hữu ích dành cho thiết kế, phát triển website.

Mong bạn ủng hộ trang web để mình có thêm kinh phí phát triển và viết thêm nhiều bài về lập trình web hơn nữa nha. Xin chân thành cảm ơn.