1

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>
electrician smurf
  • 33
  • 6
  • 2
    First at all you dont use a `button` for this. A button in HTML context is a trigegr to fire a script. What you need is an `anchor`. Then you simply add an icon (like Font-Awsome) aswell as text as it innerHTML. – tacoshy Jun 22 '21 at 13:39
  • Welcome to SO! I recommend all new users visit [ask] for tips on how to form questions that best enable the community to assist you. While it is good that you included your code, I would argue it falls short of a [mcve]. A [mcve], preferably as a snippet, with clear instructions on the desired behavior and the actual behavior, will provide the community with sufficient instruction to give you meaningful guidance. Good luck, and happy coding! – Alexander Nied Jun 22 '21 at 13:58

1 Answers1

1

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>
tacoshy
  • 10,642
  • 5
  • 17
  • 34
  • i added the font awesome icons. it worked how i wanted. i have 2 questions. first one: is it possibly to independently float home icon to left and Main Page text to the right? second is: when i increase font size such as make it equal to yours(14.5px) it looks like this https://prnt.sc/16c3ccb is it possible to fix this? yellow part is button. please ignore the other parts. – electrician smurf Jun 22 '21 at 14:57
  • yes you can but I would not recommend to use float. Its mis-used here and can cause other issues. The issue you describing is caused by an overflow. The fontsize and icon is larger then your actual "button" – tacoshy Jun 22 '21 at 15:00
  • thanks, i got it. what can i use instead of float? i just know a few comments and can't even understand what they do yet. – electrician smurf Jun 22 '21 at 16:04
  • you can remove `display: inline-flex` (add flexbox) + `justify-content: space-between` (cplace elements at both ends with space between within flexbox) + `align-items: center` (aligns the items vertically within flexbox) and it will still work. no need for float here. `` is a simple inline element not a block level element. – tacoshy Jun 22 '21 at 16:08
  • thanks man. i learnt a lot of new things from you today :) – electrician smurf Jun 22 '21 at 18:00