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.
Before we start with our project let’s understand some important concepts of read more and less button.
What are the Read-More and Read-Less buttons?
Ans: A Read More and Less button is a dynamic button that is created with the help of HTML and CSS. This type of button is used on websites where we want to grab user attention by providing great readability and providing more content in the least amount of space.
What is the use of Read-more and less button?
This type of button are used to display a large amount of data by display the most important data directly to the user and providing a button through which we can expand the data and provide more content to the user.This type of button are useful in the website where we want to experience button.
10+ HTML CSS Projects For Beginners (Source Code)
Let’s have a look at our Read More Read Less Button using HTML And CSS👇
| Code by | Pali Madra |
| Project Download | Link Available Below |
| Language used | HTML and CSS |
| External link / Dependencies | No |
| Responsive | Yes |
50+ HTML, CSS & JavaScript Projects With Source Code
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 <html> and end with </html>.
The content that will be displayed in the brower comes under the body section <body></body>.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.
Gym Website Using HTML and CSS With Source Code
Html Code Output:-
<link rel="stylesheet" href="./style.css">
Keep note that you must add this link under the head tag .
ADVERTISEMENT
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.
ADVERTISEMENT
Now we will look at our CSS code.
ADVERTISEMENT
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.
ADVERTISEMENT
Youtube Clone Using HTML and CSS With Source Code
ADVERTISEMENT
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.
Facebook Clone using HTML and CSS With Source Code
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 below👇here is the output after styling our webpage.
Restaurant Website Using HTML and CSS
Final Output Of Read More Button using HTML And CSS Only:-
The project is now finished, we have completed the Read More button using CSS Only. Now look at the live preview.
Output:
Codepen Preview of Read More Read Less Button:-
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.
Which code editor do you use for this Read More Read Less Button coding?
I personally recommend using VS Code Studio, it’s straightforward and easy to use.
is this project responsive or not?
Yes! this is a responsive project
Do you use any external links to create this project?
No!
