An easy way to incorporate an image into an HTML button

Is there a way to add an image on a button? I've been attempting to create a banner-like element for a large button, but the image doesn't seem to integrate inside the button as desired. https://i.sstatic.net/UYxEt.png I aim to have the image contained within the button without them appearing separate from each other.

Below is the HTML code provided:

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

Furthermore, here is the CSS code provided:

@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;
}

Thank you in advance!

htmlcss

Answer №1

Here is a tip for you:

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

Make sure to nest your image within the button tag.

Answer №2

If you want to open a new window when clicking on an image, you can use the onClick event in the img tag:

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

Answer №3

Give this a try. Much appreciated.

<!DOCTYPE html>
<html>
<body>

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


</body>
</html>

Answer №4

To achieve this, utilize a form and incorporate an input element with the type attribute set to "image", as shown in the following example:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Utilizing social links in web design for a seamless user experience

I'm currently exploring ways to repair the design of social media links. The GitHub and Spotify icons are displaying at different sizes, and it seems like the Blogger icon is not aligning correctly: Referring to How To Create Social Media Buttons - ...

htmlcssicons

Is there a way to process the output of phantom.js in PHP efficiently?

I have successfully retrieved output from a phantom.js request via the command line and it meets my expectations. Now, I am interested in invoking phantom.js from a php script and then analyzing the output for specific content. My phantom.js script appear ...

phphtmlparsingphantomjsoutput

The margin persists despite the usage of the * selector and !important declaration

I'm currently working on a website built upon this template: https://github.com/issaafalkattan/React-Landing-Page-Template My issue arises when trying to remove margins in multiple sections. For instance, I want to eliminate the 'orange' ar ...

javascriptcssreactjs

Sending a PHP variable to a JavaScript function

When attempting to pass a value to a JavaScript function by clicking a link, I encountered an error message: Uncaught SyntaxError: Unexpected identifier The following is the code snippet: <?php include_once("php_includes/check_login_status.php") ...

phpjavascripthtml

As each new line is added, the span text starts from the bottom and moves up by one line

I am facing an issue where I want a span to start from the top and expand as the text length increases, but it is currently starting from the bottom and moving upwards. See the image below for reference: View Image <div style="width:70%;margin-left: ...

htmlcss

I'm having trouble locating the corresponding end tag for "<%". How can I resolve this issue?

Here lies the issue: <% for(let i = 0; i < <%= elements %>.length; i++){ %> <li><%= elements[i] %></li> <%}%> ...

javascripthtmlexpresstagsejs

A step-by-step guide on utilizing URL creation in Yii1

My controller is saved in the directory Controller/SiteAction/1700/Participate and my view file can be found at views/site/eventview. I need to add a button inside eventview that directs to Controller/SiteAction/1700/Participate. Therefore, I have to utili ...

htmlajaxyii1.x

css: centrally align a collection of items that are spaced evenly throughout the group

I have multiple divs inside a container that I want to evenly distribute horizontally: [container [obj1] [obj2] [obj3] [obj4] ] Additionally, I would like the container to be centered on the page My current CSS (stylus) code for the container is as foll ...

htmlcssflexboxstylus

Preventing parent properties from overriding descendants is a key part of maintaining a hierarchical

I found a css file online that I'm using for a website I'm building, but I am only incorporating certain components from it. The issue is that the global styles in this css file are overriding all the global styles on my website. My solution was ...

htmlcsscss-selectors

Utilizing a CSS stylesheet within an ASP.NET platform

In my website, I have a reference to a CSS file like the one below: <link rel="stylesheet" type="text/css" href="http://go/css/filename.css"> Now, I want to make changes to this CSS file and upload it to a new location. Can I store the modified fi ...

.netasp.netcssvisual-studio

I can't seem to figure out why my container is not centered on the screen, despite setting the margins (left and right) to auto

Hey there, I'm a beginner in programming and currently experimenting with the CSS vertical text slide animator feature. However, when the animation runs smoothly, I noticed that the text appears disproportionate and not properly centered on the screen ...

htmlcss

What is the best way to place two stacked buttons side by side in an inline format?

I am trying to rearrange the layout of a bootstrap modal that includes two multiple select elements and two buttons. My goal is to have all controls inline, with the buttons stacked on top of each other. Here's an example of what I'm aiming for: ...

javascripthtmltwitter-bootstrap

Guide on adding space between rows in a table using HTML and Bootstrap 5

In the current table containing my content, it appears like this: https://i.sstatic.net/Mm7qT.png. I wish to add space between each row to create distinct separation and achieve a look similar to this: https://i.sstatic.net/ARgR1.png I experimented with ...

htmlcssdatatablesbootstrap-5

The H1 tag fails to appear on the webpage

I can't figure out why my H1 is not visible. It seems to be hidden by a div. What's strange is that the parent div is visible when I change the background color to something other than transparent. Even an input tag within the same div displays c ...

htmlcsssasscss-animations

The contenteditable div's selectAll feature doesn't function properly when it gains focus

I'm working with divs in a table structure and here's an example: <div contenteditable="true" onfocus="document.execCommand('selectAll',false,null)">Something</div> Clicking on a div to focus works perfectly, selectin ...

javascriptjqueryhtmlcss

Darkening effect observed in iOS Safari when applying CSS gradient on a background with similar color tone

I am facing an issue with the gradient overlay on my blue box. I want the overlay to fade from transparent to blue at the bottom of the box, creating a smooth transition for overflowing text. This is how it is supposed to appear (and does on most browsers ...

ioscsssafarigradient

What could be causing the issue of my navbar text not changing color using CSS?

Despite several attempts, I am unable to change the color of the hyperlinks in blue or purple using the HTML and CSS below. Can anyone point out what I might be missing? nav ul { /* Navbar unordered */ list-style: none; text-align: center; backgr ...

htmlcsslisthtml-lists

Tips for aligning an element in the center in relation to its sibling above

Help Needed with Centering Form Button https://i.sstatic.net/QhWqi.png I am struggling to center the "Send" button below the textarea in the form shown in the image. Despite trying various methods like using position absolute, relative, and custom margin ...

javascripthtmlcssreactjsbootstrap-4

Dividing the content: A two-column CSS layout

I am currently redesigning a layout that is using tables for a two-column design but I have encountered some issues. <div id="frame"> <div id="leftcol"> <div id="1">blah</div> </div> <div id="leftcol"> <div ...

htmlcss

Increment the text counter following the uploading of an image file with html format

I have a form in which I am checking the character limit that a user can input into a text field using the 'onkeyup' attribute to update it in real time. Now, I want to achieve a similar function for image uploading. When a user selects an image ...

javascriptphpjqueryhtml