Menu
Sites
Language
How to make a picture act like a button

Hello,

I trying to make a button with an image as a background like this:

<div class="myButton"><INPUT type="submit" name="" value=""></div>

and This is the css content:
 

<style type="text/css">
   div.myButton input {
    background:url('images/map.png') no-repeat;
    cursor:pointer;
    width: 200px;
    height: 100px;
    border: none;
    right: 10px;
    bottom:20px;
}
   </style>

Unfortunately, I got nothing in the screen.

List

Responses

2 Replies
karray gargouri

I tried also this code:

 

<button class="btn"></button>

 

with the following css code:

<style type="text/css">
    	.btn {
		height: 60px;
		width: 60px;
		right: 10px;
		bottom: 10px; 
		position: fixed; 
		background-image:url('./images/map.png');
		background-repeat:no-repeat;
		}

   </style>

in the screen, I got a grey square with no picture as a background!

Marco Buettner
Tizen or Tizen Wearables? If you use Tizen SDK you use in Simulator debugging... It looks like unable to reference the picture...