Tips for building a homepage button with an image and text using HTML and CSS

My ultimate goal is to create a button for the main page. I am looking to place an image and text side by side within this button, with a click on it directing me to the main page. Unfortunately, I have been facing challenges in resizing or stretching the image inside the button.

To better understand how my code is functioning, I decided to increase the dimensions of both the div and the button. Typically, my button has a width of 100px, height of 30px, while the div measures at 1000px width and 30px height, leading to the appearance shown here.

I am fairly new when it comes to CSS, HTML, and ASP.NET so any assistance provided will be greatly appreciated. Thank you.

Below are the snippets of my code:

<div style="width:800px; height:1000px; margin-left:auto; margin-right: auto; background-color:#D9FFFF">
    <button style="width:725px; height:427px; background-size: 5%; background:url('pics/home.png') no-repeat 1px 1px; padding:0; margin:0;">Home Page</button>
</div>
htmlcssstretching

Answer №1

To reiterate my point from the comment, it's not a button but rather an anchor. With basic knowledge of HTML and CSS, this should not be too difficult for you to achieve. The main issue you may be facing is implementing the home icon. The simplest way to do this is by utilizing the font-awesome library, which can be added to the head element like so: 

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css">

You can then include the icon as innerHTML within the anchor tag, for example: 

<a href=""><i class="fas iconname"></i> TEXT</a>

a {
  text-decoration: none;
  color: black;
  background-color: lightgrey;
  display: inline-flex;
  padding: 5px;
  width: 100px;
  height: 30px;
  font-size: 14.5px;
  justify-content: space-between;
  align-items: center;
  
}

a > i {
  color: grey;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css">

<a href="#"><i class="fas fa-home"></i> MAIN PAGE</a>

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

URL relative references across multiple domains

Here's a quick question: When developing themes and coding, how do you navigate linking to different files in your html/css code? For example: At our company, we mostly use <base target="http://whatever"> in our main template and then simply r ...

htmlrelative-path

Place a div on top of a table

I am facing a challenge with table rows and divs. The height of the table row is set to 100px, while divs can be up to 200px. I want the div to overlay the table and cover the bottom row if it exceeds the row's height. Currently, I have achieved this ...

htmlcss

How can I compare the current page URL with the navigation bar?

Looking to compare the URL of a current page to an element in the navigation bar using jQuery. Started by assigning the current URL to a variable: var currentPage = window.location.href; Then utilized an .each function to loop through each item in the n ...

javascriptjquerycss

Struggling to connect CSS files to an HTML document

Could someone lend a hand in figuring out why this link isn't working as expected? I've attempted to adjust margins within the .banner class, but it doesn't seem to be making any difference. I'm also worried because Atom doesn't s ...

htmlcsshyperlink

Creating a color-changing checkbox toggle in Bootstrap 5

Is it possible to customize the color of a Bootstrap 5 switch without changing it site-wide? I want some checkbox switches to have a unique color. Most tutorials online only cover how to change colors globally or use images, but I'm hoping to achieve ...

htmlcsstwitter-bootstrapbootstrap-5

Navigating tables with Selenium WebDriver

I am struggling to locate and interact with a specific element in a table using Selenium WebDriver. The issue is that the table IDs are constantly changing, making it difficult for me to click on the desired element. For instance, consider the following t ...

htmlselenium

Position the label to the right and left of the input field for alignment

I've been struggling to create an input form with labeled using a dl, dt, dd list. I want the first label on the left, the second on the right, and the input in the center. However, no matter what I try, I can't get the second label to align corr ...

htmlcssresponsive-design

I keep encountering an error stating that parameter 1 for 'FormData' is not of type 'HTMLFormElement'. I am struggling to resolve this issue on my own. Can someone please assist me with fixing this problem?

Here is the snippet of code that I am struggling with: const authForm = useRef(); const handleSubmit = (e) => { e.preventDefault(); //formData let form = new FormData(authForm.current); console.log(form) } This code snippet shows how I added a ...

javascripthtmlreactjsjsx

A Guide on Integrating a Javascript Reference into HTML while Displaying a PHP Object

Our website relies heavily on PHP modules to generate objects that are essential for constructing our web pages. Some of the key modules we have include: Anchor (ahref) Button CheckBox ComboBox DateTime Email Label Note Password Phone RadioButton RichTe ...

javascriptphpjqueryhtml

Tips for dynamically populating an HTML table with data from a JSON array using JQuery

I have generated an HTML table <table id="top_five_table"> <tr> <td> </th> <th>URL</th> <th width="90">Total Hits</th> <th width="380">Percentage of all Hits</th> </tr> <tr> ...

javascriptjqueryhtmljson

I can't seem to get the Font Awesome icons to display properly. What could be the issue?

How can I get Fontawesome icons to display properly in the footer? Despite having my CSS and HTML files in the same directory, the icons remain invisible. Additionally, the page seems to be loading slower than usual. I have provided all necessary informati ...

htmlcssfrontendfont-awesome

Mystery factor triggering the appearance of scrollbar as the window is resized to a specific width threshold

I'm facing a rather peculiar problem. I'm currently in the process of creating a webpage tailored for an iPhone screen resolution of: width: 640; height: 960; However, there seems to be a mysterious hidden element that is extending the width of ...

iphonehtmlcss

When I employ ngroute, the Angular section in the html page does not display

I am looking to implement a fixed menu named "fixed_admin.html" on my website: <!DOCTYPE html> <!-- saved from url=(0069)https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/ --> <html lang="en"><head><meta htt ...

javascripthtmlangularjsngrouteroute-provider

Building a custom dialog box using Angular Material with HTML and CSS

I've been exploring different approaches to create a customized angular material dialog with a unique header using CSS/SCSS and the TailwindCSS framework. I am aiming for a specific visual effect, similar to what is shown in the figure below. desired ...

htmlcssangularangular-materialtailwind-css

Is it possible to retrieve event.data beyond the onMsg callback function in JS SSE?

My current project involves using three.js to display accelerometer data in real-time and in 3D on a web browser. To transfer data from the remote server to the client side, I am utilizing server-sent-events (SSE). While I have successfully implemented th ...

javascripthtmlserverthree.jsserver-sent-events

Experiencing issues with archiving files in PHP and receiving a 'zipArchive::close() Read Error: no such file or directory in c:/' error message?

When using PHP to download multiple files as a zip folder, the code below is giving me an error message: "zipArchive::close() Read error: no such file or directory in C:// path" I have added an HTML button that, when clicked, retrieves the id of the row t ...

phphtmlfiledownloadphp-ziparchive

Steps for including a caption in a Fancybox-Media box

I am using a fancybox-media box to display Vimeo and YouTube videos. I want to add a caption below the video with some content related to it. Is there a way to do this? Below is the JavaScript code I am using: Fancybox function: $("#clpbox").click(functi ...

jqueryhtmlxsltfancybox

How to extract JSON data without HTML tags in Android Studio

i'm done with my android studio project. i have successfully stored data from wp-json. however, there seems to be an issue where I am getting the following: <p>আল্লামা আহমদ শফীর ইন্তেকালের পর ...

androidhtmljsonandroid-studioweb

Is it feasible to programmatically click a div button in C# using WebBrowser?

Exploring the capabilities of WebBrowser in C#, I came across a website that features a button without an ID, but rather nested within a div element. <div class="pc-image-info-box-button-btn-text pc-cursor"><i class="fa fa-heart" aria-hidden="tru ...

javascriptc#html

Adjustable value range slider in HTML5 with ng-repeat directive in AngularJs

I am facing a problem with my HTML5 range slider. After setting a value (status) and sending it to the database, when I reload the page the slider's value is always set to '50'. The slider is being generated within an ng-repeat from AngularJ ...

javascriptangularjshtmlrange