How to have separate background images for each button?-CodePudding

This is using html and css. I need help in making separate background images for the buttons instead of the single one you see.

I don't know the proper way in doing so without messing up the layout.

If you can help that would be great.

.button {
  width: 125px;
  height: 60px;
  font-weight: 500;
  font-size: 15px;
  margin: 20px;
  display: inline-block;
  background: url("https://images.theconversation.com/files/45159/original/rptgtpxd-1396254731.jpg?ixlib=rb-1.1.0&q=45&auto=format&w=1356&h=668&fit=crop");
  background-size: cover;
  border: 2px inset grey;
  text-decoration: none;
  color: black;
  text-shadow: 1px 1px 0px white;
}

.button:hover {
  text-shadow: 2px 2px 1px white;
}

a {
  text-decoration: none;
}

<h1 style="text-align:center;">
  <div id=but2>
    <a href="https://www.google.com/" >Demo 1</a>

    <a href="https://www.google.com/" >Demo 2</a>
  </div>

  <a href="https://www.google.com/" >Demo 3</a>

  <a href="https://www.google.com/" >Demo 4</a>

  <div id="but5">
    <a href="https://www.google.com/" >Demo 5</a>
  </div>

CodePudding user response：

You could give each button their own class with their own background img stated in css. So you'd have a class btn1 with image A and a class btn2 with image B etc.

CodePudding user response：

You can set different ids to different buttons to apply unique behaviors to each element. The button class will contain the shared characteristics of all the buttons, while for each id we will write another image.

.button {
  width: 125px;
  height: 60px;
  font-weight: 500;
  font-size: 15px;
  margin: 20px;
  display: inline-block;
  background-size: cover;
  border: 2px inset grey;
  text-decoration: none;
  color: black;
  text-shadow: 1px 1px 0px white;
}
#button1{
  background: url("custom image url);
}
#button2{
  background: url("custom image url");
}

#button3{
  background: url("custom image url");
}
#button4{
  background: url("custom image url");
}
#button5{
  background: url("custom image url");
}

<h1 style="text-align:center;">
  <div id=but2>
    <a href="https://www.google.com/"  id="button1">Demo 1</a>

    <a href="https://www.google.com/"  id="button2">Demo 2</a>
  </div>

  <a href="https://www.google.com/"  id="button3">Demo 3</a>

  <a href="https://www.google.com/"  id="button4">Demo 4</a>

  <div id="but5">
    <a href="https://www.google.com/"  id="button5">Demo 5</a>
  </div>

CodePudding user response：

You can use separated class for each button :

<style>
        .button{
                width: 125px;
                height: 60px;
                font-weight: 500;
                font-size: 15px;
                margin: 20px;
                display: inline-block;
                background-size: cover;
                border: 2px inset grey;
                text-decoration: none;
                color: black;
                text-shadow: 1px 1px 0px white;
        }
        .button1{
                background: url("your image url for button 1");
        }
         .button2{
                background: url("your image url for button 2");
        }   
        .button3{
                background: url("your image url for button 3");
        } 
        .button4{
                background: url("your image url for button 4");
        }
        .button5{
                background: url("your image url for button 5");
        } 
        .button:hover{
                text-shadow: 2px 2px 1px white;
        }
        a{
                text-decoration: none;
        }
        </style>
    <title>Code Demo</title>
      </head>
      <body>
        <h1 style="text-align:center;">
          <div id=but2>
          <a href="https://www.google.com/" >Demo 1
          </a>
      
    <a href="https://www.google.com/" >Demo 2 
    </a>
      </div>
    
      <a href="https://www.google.com/" >Demo 3
      </a>
    
      <a href="https://www.google.com/" >Demo 4
      </a>
        
      <div id="but5">
      <a href="https://www.google.com/" >Demo 5
      </a>
      </div>

CodePudding user response：

Adding an ID or Class to each button is a good method, but you could also add inline css to each a tag to add images to them (this is a less sustainable method so I don't recommend it).

#button1{
    background: url("image-url");
    background-size: cover;
}

<a href="https://www.google.com/"  style='background: url("image-url"); background-size: cover;'>Demo 1
</a>