How do i add background bar for my links in html?-CodePudding

This is my code:

a:link,
a:visited {
    background-color: white;
    color: black;
    border: 2px solid green;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    position: center;
    top: 0%;
    margin: 0px 0 0 0px;
    height: auto;
    width: auto;
    font-family: cursive;
}

a:hover,
a:active {
    background-color: green;
    color: white;
}

<a href="1st_Page.html" target="_blank">1st</a>
<a href="2nd_Page.html" target="_blank">2nd</a>
<a href="3th_Page.html" target="_blank">3rd</a>

CodePudding user response：

Assuming you mean some kind of container to put the buttons in, wrap it in a div:

a:link, a:visited { background-color: white; color: black; border: 2px solid green; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; position: center; top: 0%; margin: 0px 0 0 0px; height: auto; width: auto; font-family: cursive; } a:hover, a:active { background-color: green; color: white; }

.container {
  background: red;
  padding: 0.5em;
}

<div >
  <a href="1st_Page.html" target="_blank">1st</a>
  <a href="2nd_Page.html" target="_blank">2nd</a>
  <a href="3th_Page.html" target="_blank">3rd</a>
</div>

CodePudding user response：

You can wrap them in a div and give background

div {
  background: blue;
  padding: 12px;
}
a:link,
a:visited {
    background-color: white;
    color: black;
    border: 2px solid green;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    position: center;
    top: 0%;
    margin: 0px 0 0 0px;
    height: auto;
    width: auto;
    font-family: cursive;
}

a:hover,
a:active {
    background-color: green;
    color: white;
}

<div>
  <a href="1st_Page.html" target="_blank">1st</a>
  <a href="2nd_Page.html" target="_blank">2nd</a>
  <a href="3th_Page.html" target="_blank">3rd</a>
</div