<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Page2</title>
<style>
h2 {
color: rosybrown;
}
.wrapper {
text-align: center;
display: inline-block;
}
a:link, a:visited {
background-color: lightgoldenrodyellow;
float: right;
display: inline-block;
margin-bottom: 12px;
margin-left: 100px;
color: rosybrown;
padding: 10px 20px;
text-align: center;
border-radius: 15px;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: none;
color: hotpink;
}
</style>
</head>
<body>
<center>
<h2>Poem </h2>
</center>
<div class="wrapper">
<div class id="one"></div>
<p> <a href="page1.html">page 1</a> </p>
<p> <a href="page2.html">page 2</a> </p>
<p> <a href="page3.html">page 3</a> </p>
</div>
<div class="wrapper">
<p> <a href="page1.html">page 1</a> </p>
<p> <a href="page3.html">page 3</a> </p>
<p> <a href="page4.html">page 4</a> </p>
</div>
<br/>
</body>
</html>
I don’t see any buttons in your html. I see 6 anchor elements wrapped in p elements. I assume you want the p element to be a different color? If so, then you will need to create some different classes (one for each button color you want to have) and add the class to each p element (which I am assuming is your “button”). Also, by color I assume you mean background color. If that is the case, you already have already shown you know how to add a background color to an anchor element. Just use the same property and change the colors for each class.
a[href='page1.html']{background-color: green;}
a[href='page2.html']{background-color: orange;}
a[href='page3.html']{background-color: blue;}
a[href='page4.html']{background-color: purple;}
Note: some of your HTML code has deprecated tags and some have no use at all. It definitely needs a little bit of cleaning. If you need more help let me know.
Thank you. I think your reply set me on the right track.
I created different classes for each p element. Then I added the property to each anchor element.
I’m coding this in Dreamweaver. Dreamweaver is showing me the three blocks in different colors. However when I open the html file in Safari and Chrome, the blocks are all the same color. Fortunately when I open up in Chrome and Safari, the blocks as well as the text change color when I move my mouse over the blocks.
I don’t understand why the block background color doesn’t change when previewed in a browser.
Also, for some reason I can’t paste my code here.
When I copy and paste the code this link appears
<a href="linkhere.htm" class="pagelink">Link Text</a><br>
I am not familiar with dreamweaver but a better solution is to do the following:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Page2</title>
<style>
h2 {
color: rosybrown;
}
.wrapper {
text-align: center;
display: inline-block;
}
a:link, a:visited {
background-color: lightgoldenrodyellow;
float: right;
display: inline-block;
margin-bottom: 12px;
margin-left: 100px;
color: rosybrown;
padding: 10px 20px;
text-align: center;
border-radius: 15px;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: none;
color: hotpink;
}
.color 1 {
color: red;
}
.color3 {
color: orange;
}
#color2 {
color: green;
}
#color4 {
color: blue;
}
</style>
</head>
<body>
<center>
<h2>Poem </h2>
</center>
<div class="wrapper">
<div class id="one">
<p> <a href="page1.html" class="color1" >page 1</a> </p>
<p> <a href="page2.html" id="color2">page 2</a> </p>
<p> <a href="page3.html" class="color3">page 3</a> </p>
</div>
</div>
<div class="wrapper">
<p> <a href="page1.html" class="color1">page 1</a> </p>
<p> <a href="page3.html" class="color3">page 3</a> </p>
<p> <a href="page4.html" id="color4">page 4</a> </p>
</div>
<br/>
</body>
May try to screenshot if you can’t paste. I assume is some copyright feature of dreamweaver not to be able to copy and paste code somewhere else. Like I said not familiar with dreamweaver.
Here I have the code. I think I’m on the right track
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Page2</title>
<style>
h2 {
color: rosybrown;
}
.wrapper {
text-align: center;
display: inline-block;
}
a:link, a:visited {
background-color: lightgoldenrodyellow;
float: right;
display: inline-block;
margin-bottom: 12px;
margin-left: 100px;
color: rosybrown;
padding: 10px 20px;
text-align: center;
border-radius: 15px;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: none;
color: hotpink;
}
.color 1 {
color: red;
}
.color3 {
color: orange;
}
#color2 {
color: green;
}
#color4 {
color: blue;
}
</style>
</head>
<body>
<center>
<h2>Poem </h2>
</center>
<div class="wrapper">
<div class id="one">
<p> <a href="page1.html" class="color1" >page 1</a> </p>
<p> <a href="page2.html" id="color2">page 2</a> </p>
<p> <a href="page3.html" class="color3">page 3</a> </p>
</div>
</div>
<div class="wrapper">
<p> <a href="page1.html" class="color1">page 1</a> </p>
<p> <a href="page3.html" class="color3">page 3</a> </p>
<p> <a href="page4.html" id="color4">page 4</a> </p>
</div>
<br/>
</body>
Sorry, that was the code that NEo47443707 showed as a possible solution
Here I have a screenshot of my new code. I am having a problem because the three blocks are all the same color when opened in a browser. However when I move the cursor over in Safari and Chrome, the highlight and text color does change so I am happy that part of it works.
Please post your actual code instead of a screenshot.
When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make easier to read.
See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.
Note: Backticks are not single quotes.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Page2</title>
<style>
h2 {
color: rosybrown;
}
.wrapper {
text-align: center;
display: inline-block;
}
a:link, a:visited {
float: right;
display: inline-block;
margin-bottom: 12px;
margin-left: 100px;
color: pink;
padding: 10px 20px;
text-align: center;
border-radius: 15px;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: none;
color: hotpink;
}
#btn1_color
{
background-color: blue;
}
#btn2_color
{
background-color: yellow;
}
#btn3_color
{
background-color: red;
}
#btn4_color
{
background-color: black;
}
#btn5_color
{
background-color: blue;
}
</style>
</head>
<body>
<center>
<h2>Poem </h2>
</center>
<div class="wrapper">
<div class id="one"></div>
<p> <a href="page1.html" id="btn3_color">page 1</a> </p>
<p> <a href="page2.html" id="btn1_color">page 2</a> </p>
<p> <a href="page3.html" id="btn2_color">page 3</a> </p>
</div>
<div class="wrapper">
<p> <a href="page1.html" id="btn4_color">page 1</a> </p>
<p> <a href="page3.html" id="btn5_color">page 3</a> </p>
<p> <a href="page4.html" id="btn3_color">page 4</a> </p>
</div>
<br/>
</body>
</html>
you can try this code i hope it will help for you.
It is actually better to style with class selector instead of id selectors. Also, give the class a name which better describes what it is. For example:
.btn-blue {
background-color: blue;
}
.btn-yellow {
background-color: yellow;
}
.btn3-red {
background-color: red;
}
This allows you to use these same classes for different buttons in other places in your HTML.
I finished writing the code and everything works the way I want now. Thank you very much for everybody’s help.