CODEWITHSUNDEEP
htmlcss
pistacchio
pistacchio

Reputation: 58863

Buttons with images in plain HTML / CSS

is there a way to add an image to a regular <input type = "button" /> besides the text?

Upvotes: 3

Views: 625

Answers (6)

rekha_sri
rekha_sri

Reputation: 2725

<input type="button" style="background-image:url(flower.jpg)" value="Click">

It will set the background image for button using HTML.

Upvotes: 1

kevchadders
kevchadders

Reputation: 8335

Button in HTML (For location I'd normally place all images in a images folder)

<BUTTON type="submit" src="/images/Button.png" value="">

Button via CSS, where myBtn is defined in the class file

<BUTTON type="submit" class="myBtn" value="">

Where myBtn is defined in the class file

.myBtn{ 
background: url(/images/Button.PNG) no-repeat; 
cursor: pointer; 
width: 140px; 
height: 80px; 
border: none; 
}

Upvotes: 1

Pavunkumar
Pavunkumar

Reputation: 5335

We can have css for button . 

 

background: url(images/blue.png)  ;

Upvotes: 1

matpol
matpol

Reputation: 3074

Yes - you should be able to set the background image on the button in CSS. My preferred method is to use the button tag e.g.

<button type="submit">text</button>

You can put any html you want within the tag and style it.

Upvotes: 3

Dolbz
Dolbz

Reputation: 2106

You want the "image" input type

<input type="image" src="/path/to/image.png" value="Click here" size="32,32" border="0" />

Upvotes: 1

McAden
McAden

Reputation: 13972

An image in the button or an image as the button?

Image AS button:

<input type="image" src="/images/myImage.png" alt="An image as a button"/>

Image inside button....I don't think so.

Upvotes: 0

Related Questions