read more button html | read more button html code

read more button html | read more button html code

read more button html | read more button html code


Welcome🎉 to codewithrandom blog in this blog we learn that how we create read more button html . We use HTML & css  & javascript for this read more button html.  Hope you enjoy our blog so let's start with a basic HTML structure for read more button html.

HTML code for read more button html 

 <h1>Hello world</h1>  
 <p class="text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Perferendis veritatis animi aliquam laboriosam velit, esse, blanditiis aspernatur sint est magnam debitis delectus in fuga fugiat repellat dignissimos ipsum necessitatibus corrupti veniam reprehenderit,<span class="dots"> ...</span> <span class="moreText"> assumenda sapiente expedita labore atque! Sint velit cumque minus pariatur quisquam, beatae ab quo impedit eaque soluta vel laboriosam itaque similique iste ex aut in nihil dolorem consequuntur possimus eligendi eos optio ipsam! Sint ullam voluptate obcaecati asperiores eos vero sed iusto magnam ad, vel repellat quidem? Omnis fugit accusantium, illo quos eos odio consectetur et nemo excepturi deleniti dolorum adipisci dolores delectus possimus libero, sed iusto dolorem? Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis neque distinctio modi dicta ut aperiam molestiae quos incidunt dolore iure officia! Blanditiis sint delectus quam quae nulla.</span></p>  
 <button class="read-more-btn">Read More</button>  
There is all HTML code forread more button . Now you can see output without css then we write css for our read more button .
read more button html | read more button html code

CSS for read more button html

1:  body {  
2:   font-family: "Montserrat";  
3:   text-align: justify;  
4:   max-width: 800px;  
5:   margin: 0 auto;  
6:   background-color: rgb(18, 23, 27);  
7:   color: aliceblue;  
8:  }  
9:  .text {  
10:   font-size: 24px;  
11:  }  
12:  .moreText {  
13:   display: none;  
14:  }  
15:  .read-more-btn {  
16:   padding: 15px 60px;  
17:   background-color: rgb(149, 170, 197);  
18:   color: rgb(53, 49, 49);  
19:   border: none;  
20:   outline: none;  
21:   font-size: 20px;  
22:   cursor: pointer;  
23:  }  
24:  .text.show-more .moreText {  
25:   display: inline;  
26:  }  
27:  .text.show-more .dots {  
28:   display: none;  
29:  }  
Now we complete our css section, now we need only JavaScript functionality for read more. Here is our updated output with css.

read more button html | read more button html code

 Javascript for read more button html 

1:  const readMoreBtn = document.querySelector(".read-more-btn");  
2:  const text = document.querySelector(".text");  
3:  readMoreBtn.addEventListener("click", (e) => {  
4:   text.classList.toggle("show-more");  
5:   if (readMoreBtn.innerText === "Read More") {  
6:    readMoreBtn.innerText = "Read Less";  
7:   } else {  
8:    readMoreBtn.innerText = "Read More";  
9:   }  
10:  });  
Now we completed all our HTML css JavaScript coding for read more button . You can an output video at bottom.


read more button html | read more button html code

read more button html | read more button html code

Check it more

css responsive menu | CSS animated Menu

countdown timer html javascript | free countdown timer

Custom checkbox in CSS ? | Create a custom checkbox using CSS ?



In this post, we learn how to create  read more button html with simple coding of HTML & css and javascript. If we did a mistake or any confusion please drop a comment so give a reply or help you in easy learning.

written by - codewithrandom/Anki 

1 Comments

Post a Comment

Previous Post Next Post