Create a Read More Button using HTML And CSS Only

Hello Coders!! In this article, we will use HTML and CSS to create a "Read More Read Less" button. this Read More Button In Html Without Javascript Code so let's Create this amazing mini project.

The Read More and Read Less buttons are useful when you want to hide additional information while still giving visitors a sense of what the article or post is about.

You might want to use these buttons in multiple posts or paragraphs. However, writing separate code for each button appears to be time-consuming. It may also have an impact on the performance of your website.
In this tutorial, we will create a Read More Read Less button for multiple paragraphs using only a few lines of code.

I hope you have a clear vision for the project.

Let's have a look at our Read More Read Less Button using HTML And CSS

Step1: Adding HTML Code

The HTML is hypertext markup language is the main structure of our webpage which will help us to display our content to the browser.

All the HTML document must start with <!doctypehtml> this helps the browser to understand the code written follows the lastest HTML format.

The HTML document itself begin With and end with .

The content that will be displayed in the brower comes under the body section

.Inside the body tag main content lies.

Let's take a look at our HTML Code.

<!DOCTYPE html>
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Read More Button</title>
      <link rel="stylesheet" href="style.css" />
   <body>
      <h1>Read the full post </h1>
      <article>
         <input type="checkbox" id="read_more" role="button">
         <label for="read_more" onclick=""><span>Read More</span><span>Hide This Shit!</span></label>     
         <figure>
            <img src="https://cssdeck.com/uploads/media/items/8/8rDcElm.jpg" alt="I'm an owl" />
         </figure>
         <section>
            <p>Owls are a group of birds that belong to the order Strigiformes, constituting 200 extant bird of prey species. Most are solitary and nocturnal, with some exceptions (e.g. the Northern Hawk Owl). </p>
         </section>
         <section>
            <p>Owls hunt mostly small mammals, insects, and other birds, although a few species specialize in hunting fish. They are found in all regions of the Earth except Antarctica, most of Greenland and some remote islands. Though owls are typically solitary, the literary collective noun for a group of owls is a parliament. Owls are characterized by their small beaks and wide faces, and are divided into two families: the typical owls, Strigidae; and the barn-owls, Tytonidae.</p>
         </section>
      </article>
   </body>
</html>

First, we'll use the H1 tag to add the main heading of our article.
We'll start with an article tag, then add an input of type "checkbox" inside it, and then use the label tag to add a label to our check box.
We will now add an image to our article by using the image tag.
Using the multiple paragraph tag, we will now add multiple pieces of content to our article.

Now we have the added the basic structure of our webpage . Let's us take a look at our HTML output.

Before the code, you just need to add the CSS link to our HTML file so that we add styling to our website:

Keep note that you must add this link under the head tag .

Step2: Adding the CSS Code

Cascading Style Sheets (CSS) is a markup language for describing the presentation of a document written in HTML or XML. CSS, like HTML and JavaScript, is a key component of the World Wide Web.

Now we will look at our CSS code.

html { background: white }

 * {
     margin: 0;
     padding: 0;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     -ms-box-sizing: border-box;
     box-sizing: border-box;
 }

 h1 {
   font-family: arial sans-serif;
   font-size: 2em;
   font-weight: 900;
   color: #333;
   margin-bottom: 20px;
   text-shadow: 3px 3px 2px rgba(150, 146, 148, 1);
 }

 figure {
     margin: 0 0 1.3rem 0;
     -webkit-transition: .125s linear;
     -moz-transition: .125s linear;
     -ms-transition: .125s linear;
     -o-transition: .125s linear;
     transition: .125s linear;
 }

 figure img {
     max-width: 100%;
     height: auto;
 }

 body {
     max-width: 480px;
     width: 90%;
     margin: 3em auto;
     font-size: 75%;
     line-height: 1.3rem;
     font-family: sans-serif;
     position: relative;
     *zoom: 1;
 }

 body:before, body:after {
     content: "";
     display: table;
 }

 body:after { clear: both }

 p { margin-bottom: 1.3rem }

 article {
     margin-bottom: 3rem;
     position: relative;
     *zoom: 1;
 }

 article:before, article:after {
     content: "";
     display: table;
 }

 article:after { clear: both }

 article figure {
     float: left;
     width: 32.5%;
 }

 article section:first-of-type {
     float: right;
     width: 62.5%;
 }

 article section:last-of-type {
     display: none;
     visibility: hidden;
 }

 section {
     -webkit-transition: .125s linear;
     -moz-transition: .125s linear;
     -ms-transition: .125s linear;
     -o-transition: .125s linear;
     transition: .125s linear;
 }

 input[type=checkbox] {
     border: 0;
     clip: rect(0 0 0 0);
     height: 1px;
     width: 1px;
     margin: -1px;
     overflow: hidden;
     padding: 0;
     position: absolute;
 }

 [for="read_more"] {
     position: absolute;
     bottom: -3rem;
     left: 0;
     width: 100%;
     text-align: center;
     padding: .65rem;
     box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1), inset -1px -1px rgba(0, 0, 0, 0.1);
 }

 [for="read_more"]:hover {
     background: rgba(0,0,0,.5);
     color: rgb(255,255,255);
 }

 [for="read_more"] span:last-of-type {
     display: none;
     visibility: hidden;
 }

 input[type=checkbox]:checked ~ section {
     display: block;
     visibility: visible;
     width: 100%;
 }

 input[type=checkbox]:checked ~ figure { width: 100% }

 input[type=checkbox]:checked ~ [for="read_more"] span:first-of-type {
     display: none;
     visibility: hidden;
 }

 input[type=checkbox]:checked ~ [for="read_more"] span:last-of-type {
     display: block;
     visibility: visible;
 }

After we've added the CSS code, we'll go over it step by step. To save time, you can simply copy this code and paste it into your IDE. Let us now examine our code step by step.

Step1: We'll use the HTML tag to set the background colour to white, and we will use the universal selector to set the padding and margin to zero. The box sizing was also defined as a border box. Now, we'll style our article's heading with the H1 tag. For our heading, we chose "Arial" as the font family. Our heading's font size is "2 rem," and the colour is "dark gray." We also added a text shadow to the article's heading.

html { background: white }

 * {
     margin: 0;
     padding: 0;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     -ms-box-sizing: border-box;
     box-sizing: border-box;
 }

 h1 {
   font-family: arial sans-serif;
   font-size: 2em;
   font-weight: 900;
   color: #333;
   margin-bottom: 20px;
   text-shadow: 3px 3px 2px rgba(150, 146, 148, 1);
 }

Step2: We will now style the container of our image using the element selector (figure). Here, we've set the top and bottom margins to zero and the right margin to "1.3 rem." We also included the transition in our container. Now, we use "img" to define the width as 100% of our image, and the height is set to auto.

figure {
    margin: 0 0 1.3rem 0;
    -webkit-transition: .125s linear;
    -moz-transition: .125s linear;
    -ms-transition: .125s linear;
    -o-transition: .125s linear;
    transition: .125s linear;
}

figure img {
    max-width: 100%;
    height: auto;
}

Step3: Now, we use the body to set the maximum width of the article to 480px. Our article's actual width is set to "90%," and the font size is set to "75%." The font family used here is sans-serif. Our article's position is "relative." Now, we will style the content of our article by defining the margin bottom of "3rem" and scaling the content with the zoom property.

Now, we'll use the float property to move the image to the left in the article figure, and the float property to move the paragraph to the right in the article section. Using the (last-type-of) selector, we also set the display to "none" and the visibility to "none."

body {
    max-width: 480px;
    width: 90%;
    margin: 3em auto;
    font-size: 75%;
    line-height: 1.3rem;
    font-family: sans-serif;
    position: relative;
    *zoom: 1;
}

body:before, body:after {
    content: "";
    display: table;
}

body:after { clear: both }

p { margin-bottom: 1.3rem }

article {
    margin-bottom: 3rem;
    position: relative;
    *zoom: 1;
}

article:before, article:after {
    content: "";
    display: table;
}

article:after { clear: both }

article figure {
    float: left;
    width: 32.5%;
}

article section:first-of-type {
    float: right;
    width: 62.5%;
}

article section:last-of-type {
    display: none;
    visibility: hidden;
}

section {
    -webkit-transition: .125s linear;
    -moz-transition: .125s linear;
    -ms-transition: .125s linear;
    -o-transition: .125s linear;
    transition: .125s linear;
}

Step5: We will now style our checkbox with the input type "checkbox." The border is set to "0" in this case. The height and width are both defined as "1px." Padding is set to "zero," and overflow is set to "hidden."

The position is now defined as "absolute," and the text is aligned to the "centre." Using the hover selector, we will now set the background colour to "black" and the font colour to "white."

input[type=checkbox] {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
}

[for="read_more"] {
    position: absolute;
    bottom: -3rem;
    left: 0;
    width: 100%;
    text-align: center;
    padding: .65rem;
    box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1), inset -1px -1px rgba(0, 0, 0, 0.1);
}

[for="read_more"]:hover {
    background: rgba(0,0,0,.5);
    color: rgb(255,255,255);
}

[for="read_more"] span:last-of-type {
    display: none;
    visibility: hidden;
}

Step6: When the user clicks on the read more button, the width of our content is set to 100% using the checked selector. Also, when we set the visibility and display to "none" with the first-type-of selector and the visibility and display to "block" with the last-type-of selector. When we check the first type of selector, the content is hidden; when we check the last type of selector, the content is visible.

input[type=checkbox]:checked ~ figure { width: 100% }

 input[type=checkbox]:checked ~ [for="read_more"] span:first-of-type {
     display: none;
     visibility: hidden;
 }

 input[type=checkbox]:checked ~ [for="read_more"] span:last-of-type {
     display: block;
     visibility: visible;
 }

Now we have completed our css code and belowhere is the output after styling our webpage.

Final Output Of Read More Button using HTML And CSS Only:-
Read More Read Less Button using HTML And CSS

The project is now finished, we have completed the Read More button using CSS Only. Now look at the live preview.

Now We have Successfully created the Read More button using HTML and CSS. You can use this project directly by copying it into your IDE. We hope you understood the project, If you have any doubts feel free to comment!!

If you find out this Blog helpful, then make sure to search Codewithrandom on Google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

follow : codewithrandom

Written By : arun

Code by : Pali Madra