CODEWITHSUNDEEP
htmlcssstretching
electrician smurf
electrician smurf

Reputation: 33

how to create home page button with image and text(html, css)

all i want to do is to be able to create this main page button. i want to put an image and text next to each other in a button and when click on the button it'll link me to the main page. (i'll give it a <a href... later) i couldn't resize or stretch the image in button.

in order to observe what does my code, i expanded dimensions of the div and button. normally, my button is w:100px, h:30px and the div is w:1000px, h:30px. and it looks like this

i'm new to css & html and as well as asp.net. please help, thanks.

my codes:

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

Upvotes: 1

Views: 930

Answers (1)

tacoshy
tacoshy

Reputation: 13002

Like I said in the comment, it is not a button it is an anchor. Shouldn't be too hard with basic HTML and CSS knowledge. The thing you probably struggling with is the home icon. Easiest way to get this is by using the font-awesome library by adding it to the head element: <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css">

and add it as innerHTML to the anchor: <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>

Upvotes: 1

Related Questions