How to make a picture act like a button

By karray gargouri

05 Jul 2014 01:46 English 2 Replies

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.

Responses

2 Replies

karray gargouri

05 Jul 2014 02:07

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!