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