How to add image in a button html

Question

How would i add an image on a button? Right now i am trying to create a banner like thing for a big button but the image doesn't seem to get inside the button as shown here: I want the image to be inside the button and not separate each other like that

Here is the HTML code:

<!DOCTYPE html>
<html lang='en'>

<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Saharsh | Projects</title>
  
  <link rel='stylesheet' href='/Styles/projects.css'>
  <link rel='stylesheet' href='../style.css'>
  <script src='https://kit.fontawesome.com/a076d05399.js' crossorigin='anonymous'></script>

  <link rel='icon' type='image/x-icon' href='/Images/Branding/pfp.png'>
</head>

<body class='container'>
  <div id='home'>
    <nav class='navbar'>
      <ul>
        <li><a href='../index.html'>Home</a></li>
        <li><a href='#aboutMe'>About me</a></li>
        <li><a href='#moreSoon'>Contact me</a></li>
      </ul>
    </nav>
  </div>

    <br class='us'><br class='us'><br class='us'>
    <br class='us'><br class='us'><br class='us'>
    <br class='us'>

  <div>
    <h1 class='main'>My Projects</h1>
  </div>
    
  <br class='us'><br class='us'><br class='us'>
  <br class='us'>
  
  <div>
    <a href='#aboutMe'><img src='../Images/Projects/Modular-FPS.png' class='banner'><button class='project_button'>Modular FPS Template</button></img></a>
  </div>

  <br class='us'><br class='us'><br class='us'>
  <br class='us'><br class='us'><br class='us'>

  <div>
    <h1 id='moreSoon' style='text-align: center;'>
      <a href='https://github.com/Saharsh1223' target='_blank'><span class='icon_span'><img class='icon' src='/Images/Socials/github.svg'></span></a>
      <a href='https://discord.gg/bkP2P5uuH2' target='_blank'><span class='icon_span'><img class='icon' src='/Images/Socials/discord.svg'></span></a>
      <a href='https://youtube.com/SaharshDev' target='_blank'><span class='icon_span'><img class='icon' src='/Images/Socials/youtube.svg'></span></a>
      <a href='https://twitter.com/Saharsh1223' target='_blank'><span class='icon_span'><img class='icon' src='/Images/Socials/twitter.svg'></span></a>
    </h1>
  </div>

  <br class='us'>

  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src='Scripts/scrollSmooth.js'> </script>
  <!-- <script src='Scripts/i_am_a.js'> </script> -->
</body>

</html>

And here is the CSS code:

@font-face {
  font-family: 'mainFont';
  src: url("../Fonts/Poppins/Poppins-Medium.ttf") format('truetype');
}

@font-face {
  font-family: 'descFont';
  src: url("../Fonts/Poppins/Poppins-Regular.ttf") format('truetype');
}

.project_button {
  font-family: 'descFont';
  font-weight: normal;
  font-style: normal; 

  background-color: #181818;
  border: none;
  color: white;
  /* padding: 20px; */

  text-decoration: none;
  display: inline-block;
  font-size: 18px;
  margin: 4px 6px;
  border-radius: 10px;

  cursor: pointer;

  width: 450px;
  height: 250px;

  box-shadow: 0px 16px 16px rgba(0,0,0,0.14);
  transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.project_button:hover {
  transform: scale(1.03);
}

.banner {
  width: 350px;
  height: 190px;
}

Thanks in Advance!

not sure why you need the button, but you could perform onclick event on an image, I think the button might not necessary — jiale ko, May 09 '22 at 07:45
What exactly do you want to achieve can you share a sample screenshot? — poo, May 09 '22 at 07:51
Don't ditch the button and just add the onclick event to an image. That would be really bad practice if you do it like that. — cloned, May 09 '22 at 07:52

poo · Accepted Answer · 2022-05-09T07:53:51.570

3

You can do this:

<button class='project_button'>Modular FPS Template <img src='../Images/Projects/Modular-FPS.png' /></button>

Move your image inside the button.

edited May 09 '22 at 07:53

answered May 09 '22 at 07:50

poo

1,080
3
10

4

Don't add a button inside an a-tag, this doesn't make sense from a logical perspective. if it is a link, use an a-tag. Otherwise use a button. But never use both at the same time. – cloned May 09 '22 at 07:52

score 0 · Answer 2 · answered May 09 '22 at 07:54

0

Please try this. Thanks.

<!DOCTYPE html>
<html>
<body>

<h2>HTML Image</h2>
<button><img src="image.jpg" alt="No Image" width="50" height="30"></button>


</body>
</html>

answered May 09 '22 at 07:54

Pream Dev

19
2

You didn't close your img tag – nnaem May 09 '22 at 07:55
No need to close a image tag. If you want to close image before button. Please add a or
tag. EX: – Pream Dev May 09 '22 at 07:58
I meanth a slash at the end of the existing img tag – nnaem May 09 '22 at 11:37

score 0 · Answer 3 · answered May 09 '22 at 07:54

0

You can try adding the onClick event to the img tag:

<img onClick="window.open("https://example.com")" />

answered May 09 '22 at 07:54

nnaem

177
1
2
12

score 0 · Answer 4 · answered May 09 '22 at 07:55

0

You should be able to do it using a form and using an input with the "image" type like this:

<input type="image" id="myimage" src="[...]" />

answered May 09 '22 at 07:55

Tim Poels

1
3

How to add image in a button html

4 Answers4