0

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?

4
Contributors
4
Replies
33
Views
2 Years
Discussion Span
Last Post by marqusG
1
<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");

Edited by pritaeas: Added markdown.

1

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 { ... }
0

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 ?

0

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.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.