How can I make each button in my website a different color?

   <!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.

markdown_Forums

<!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.