How To - Read More Read Less Button CSS only

Khái quát

Hiệu ứng xem thêm trong một trang web thật sự rất phổ biến. Mục đích cơ bản của nó là tóm tắt nội dung và ẩn đi một phần thông tin dư thừa. Vậy bạn biết làm vậy để làm gì không.

Đó là để tăng trải nghiệm người dùng, tránh việc làm phiền họ với những nội dung được cho là không quá cần thiết.

Và nó sẽ luôn có một nút để người dùng được lựa chọn xem hết nếu họ muốn.

Khi thiết kế ra chức năng này cần chú ý rằng những dòng đầu tiên đang mặc định được hiện lên thì nên có nội dung tổng quát, rỏ ràng để người xem có thể hình dung ra được toàn bộ nội dung. Còn phần ẩn đi chính là phần chi tiết thông tin.

Video tutorial

Truy cập youtube Lùn Dev để xem nhiều hơn

Code tutorial

Code HTML

  <!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="box">
        <input type="checkbox" name="readmore" id="readmore">
        <div class="content">
            <h1>TEXT DEMO</h1>
            <div class="des">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas sequi consectetur culpa eius aliquam, deserunt voluptatem quos distinctio atque, ad consequatur nemo totam fugit mollitia molestias natus exercitationem veritatis libero porro debitis? Et porro consequatur minima placeat harum iusto labore sed perspiciatis accusamus voluptatum ipsam esse illum fugiat, possimus vitae dolores officiis tenetur provident explicabo beatae nostrum aspernatur doloremque quos! Deserunt quisquam facere doloremque hic nisi, at earum facilis voluptatibus exercitationem distinctio! Deleniti, voluptatem ratione minima incidunt laboriosam repudiandae maiores cumque maxime fugit ex dolore ullam iusto, id ea dolorum reiciendis eaque asperiores. Magni ab tenetur doloremque! Harum totam laboriosam, quam corrupti dolorum nostrum ullam, temporibus expedita minima fuga, sapiente pariatur voluptatibus? Nesciunt repellat labore totam sunt porro velit excepturi assumenda distinctio non? Eveniet a magnam doloribus odit voluptatum earum maiores ipsum fuga recusandae aliquam. Praesentium autem vel ipsum omnis eligendi ab et, quaerat nobis culpa dolores laborum neque harum consequatur in mollitia est asperiores excepturi qui, veniam sit officia nisi id libero! Natus ex, error eos aliquid rem, quis illum ratione fugit magnam non laborum dolores dignissimos reiciendis aspernatur nostrum cumque repudiandae. Doloremque atque perferendis consectetur, officiis eaque adipisci rerum corrupti porro laboriosam molestiae inventore provident, sequi at sapiente.
            </div>
            <div class="button">
                <label for="readmore"
                    data-more="READ MORE"
                    data-less="READ LESS"
                ></label>
            </div>
        </div>
    </div>
    
</body>
</html>

Code CSS

  body{
    background-image: radial-gradient(#b308b6, #2F144C);
    height:100vh;
    overflow: hidden;
}
.box{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    background-color: #2F144C;
    color:#eee;
    padding:20px 40px;
    font-family: monospace;
    width:200px;
}
.box input[name="readmore"]{
    display: none;
}
.box h1{
    margin-bottom: 30px;
    text-align: center;
}
.box .des{
    text-align: justify;
    position: relative;
    overflow: hidden;
    max-height: 150px;
    transition: 0.5s ease-in-out;
}
.box .des::before{
    position: absolute;
    bottom:0;
    left:0;
    width:100%;
    height:50px;
    transition: 0.5s ease-in-out;
    content:'';
    background-image: linear-gradient(to top, #2F144C, transparent);
}
.box .button{
    margin-top:30px;
    text-align: center;
}
.box label{
    text-align: center;
    display: inline-block;
    border:1px solid #000;
    width:140px;
    height:50px;
    position: relative;
    cursor: pointer;
}
.box label::before{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    content:attr(data-more);
    display: flex;
    justify-content: center;
    align-items: center;
}
.box input[name="readmore"]:checked ~ .content label::before{
    content:attr(data-less);
}
.box input[name="readmore"]:checked ~ .content .des{
    max-height: 300px;
}
.box input[name="readmore"]:checked ~ .content .des::before{
    height: 0px;
}
.content{
    position: relative;
}
.content::before{
    position: absolute;
    bottom:50px;
    right:5px;
    width:50px;
    height: 70px;
    content:'';
    background-image: url(img1.png);
    background-size: 100%;
    background-repeat: no-repeat;
    z-index: 1;
    transition: 2s ease-in-out;
}
.content::after{
    position: absolute;
    bottom:0px;
    right:0px;
    transform: translate(70%,50%);
    width:200px;
    height: 150px;
    content:'';
    background-image: url(img2.png);
    background-size: 100%;
    background-repeat: no-repeat;
    z-index: 1;
    transition: 2s ease-in-out;
}
.box input[name="readmore"]:checked ~ .content::before{
    bottom:80%;
    right:100%;
    transform: rotate(-50deg);
}
.box input[name="readmore"]:checked ~ .content::after{
    transform: translate(75%,55%) rotate(30deg);
}

Khái quát

Video tutorial

Code tutorial

Code HTML

Code CSS

Download code and image

Thank You

Contact Form