Member Avatar for 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?

  • 4 Contributors
  • 4 Replies
  • 131 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by marqusG

Dani AI

Generated

The original markup and selector issues noted by and explain why the button didn’t behave at first. With that fixed, the “thickness” you see is almost always the browser’s default button chrome — padding, line-height, focus outline or an inset shadow — not the image itself. was correct to remove the visual border, but there are a few cleaner options to get a true image-only control and preserve accessibility.

Use the image as the control (simplest)

<input type="image" src="images/login.png" alt="Log in">

Note: when placed in a form this behaves like a submit control. For non-form actions use a button (below).

Use a semantic button with an actual IMG (best for accessibility)

<button type="button" class="img-btn">
  <img src="images/login.png" alt="Log in">
</button>

Make the image fill the button and remove inline gaps by making the IMG a block-level element and zeroing line-height on the button.

If you prefer a CSS-background approach
reset the browser chrome (appearance, box-shadow, padding) so the image is the only visible thing. Keep a visible focus style for keyboard users.

Quick troubleshooting checklist

  • Inspect the element in DevTools and check the computed box model to see whether padding, border or box-shadow is coming from user-agent styles.
  • Ensure the clickable area matches the image by setting explicit width/height or letting the IMG be block-level.
  • If you remove the default focus ring, replace it with a clear :focus style (for accessibility).
  • Clear cache / hard-reload when testing CSS changes.

These approaches will remove the “thickness” while keeping the control usable. If a specific browser still shows unexpected chrome, paste the computed styles and the exact HTML/CSS and mention the browser/version — that narrows the cause quickly.

Recommended Answers

All 4 Replies

Member Avatar for 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");

Edited by pritaeas because: Added markdown.
Member Avatar for 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 { ... }
Member Avatar for 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 ?

Member Avatar for 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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.