Hello, i introduced on my website the code for read more read less button which i found out on https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_read_more and i want to change the colour of this button. Can someone help ?
#read more read less button
sullen pasture
steady shore
Hello, i introduced on my website the code for read more read less button which ...
tall bear
You can use div then use css,as suggested by Matej.
sullen pasture
You can use div then use css,as suggested by Matej.
Where should i add it to change the button colour for both read more and read less? I don’t work in this field and i am not good at it, i just want to edit something on my online store
This is the code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#more {display: none;}
</style>
</head>
<body>
<h2>Read More Read Less Button</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id="dots">...</span><span id="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button onclick="myFunction()" id="myBtn">Read more</button>
<script>
function myFunction() {
var dots = document.getElementById("dots");
var moreText = document.getElementById("more");
var btnText = document.getElementById("myBtn");
if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = "Read more";
moreText.style.display = "none";
} else {
dots.style.display = "none";
btnText.innerHTML = "Read less";
moreText.style.display = "inline";
}
}
</script>
</body>
</html>
cunning fiber
<div>
<button onclick="myFunction()" style="background-color:blue;" id="myBtn">Read more</button>
</div>
tall bear
Yes @sullen pasture try this code. If it does not work then remove the div tag then try again