custom button

[davy_yg]

Hello,

I am trying to create a custom image button and I haven't been able to do it:

index.php

<input type="button" onclick="alert('Hello world!')">Click Me!</button>

styleT.css

.input {
    border: 1px solid #006;
    background-image("../images/login.jpg");
}

button{
    background-image("../images/login.jpg");
}

I wonder what I did wrong?

[smdjilani]

<input type="button" onclick="alert('Hello world!')">Click Me!</button>

here put eigther <input> or <button>, u opened <input> and closed with </button>
and in style.css background-image("../images/login.jpg"); should be like background-image:url("../images/login.jpg");

[JorgeM]

Also in your styles, .input means you are trying to apply the styles to elements with a class of "input".

In your styles "." will target classes while "#" targets IDs. If you want to target all input elements it's just

 input { ... }

[davy_yg]

The custom button does works now! only that there is a certain thickness in the button instead of only image button without any thickness. Is there any way to create such thing ?

[marqusG]

Just edit your css this way:

    .input {
      border: 1px solid #006;
      background-image: url("../images/login.jpg");
    }
    input[type="button"]{
      border: none;
      background-image: url("../images/login.jpg");
    }

This way all input will have a border but the button.