Member Avatar for Deep Modi

I want to add the button of my own look.
I mean: i want to set the image on button and size of it... and alingn it on center with some effect

more info: (image 1 = image)
I am having 3images of text "Download"
so when my cursor is not on the Button Download then the default image will be present
if mouse is hover on it so then the image will replace with image-2 else image
if the mouse is clicked then image-3 else image

This effect is similar to regular button effect...
the effect s lighting text or else

  • 3 Contributors
  • 3 Replies
  • 183 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by mildred2013

Dani AI

Generated

Quick practical answer for : use a semantic button with CSS for the three visual states (normal / hover / pressed) instead of embedding the image as a form input. That gives you full styling control, keyboard and screen‑reader support, and easier centering/size control. Thanks to for the generator idea (handy for pure-CSS buttons) and to for the input-image reminder — it works, but button + CSS is more flexible.

A small, practical pattern using a sprite (one image with three frames) — replace the sprite filename and sizes to match your assets:

<button class="download-btn" aria-label="Download">
  <span class="visually-hidden">Download</span>
</button>
.download-btn {
  width: 140px;
  height: 44px;
  display: block;
  margin: 0 auto;            /* centers the button horizontally */
  padding: 0;
  border: none;
  background: url('download-sprite.png') 0 0 no-repeat;
  background-size: 420px 44px; /* 3 frames @1x = 3*140 x 44 */
  cursor: pointer;
}
.download-btn:hover { background-position: -140px 0; }
.download-btn:active,
.download-btn.pressed { background-position: -280px 0; }
.download-btn:focus { outline: 2px solid #36f; outline-offset: 3px; }

/* keep visible text for screen readers */
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

Notes and troubleshooting: use a .pressed class toggled by touchstart/touchend if a device doesn't honor :active. For retina screens create a 2x sprite and set background-size to the logical width/height so the image stays sharp. Prefer inline SVG if you need scalable lighting/glow effects (CSS transitions on fill or an overlay are simple and performant). Test keyboard focus, screen readers, and touch to make sure the visual states match the interaction.

Recommended Answers

All 3 Replies

Member Avatar for Deep Modi

pixelsoul
dude I want to add image on the button.
but thanks for your suggestion

Member Avatar for mildred2013

<form action="demo_form.asp">
First name: <input type="text" name="fname"><br>
<input type="image" src="submit.gif" alt="Submit">
</form>

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.