Submit Button Image

by

Edited:

I think you are trying to do as done in this DEMO

There are three states of a button: normal, hover and active

You need to use CSS Image Sprites for the button states.

See The Mystery of CSS Sprites 

/*CSS*/

.imgClass { 
background-image: url(http://inspectelement.com/wp-content/themes/inspectelementv2/style/images/button.png);
background-position:  0px 0px;
background-repeat: no-repeat;
width: 186px;
height: 53px;
border: 0px;
background-color: none;
cursor: pointer;
outline: 0;
}
.imgClass:hover{ 
  background-position:  0px -52px;
}

.imgClass:active{
  background-position:  0px -104px;
}
<!-- HTML -->
<input type="submit" value="" class="imgClass" />

More Related Contents:

  1. Use a normal link to submit a form
  2. Vertically center element on HTML page with some content on top (Bootstrap)
  3. comma after td entry html [closed]
  4. Using relative URL in CSS file, what location is it relative to?
  5. How to create a circle with links on border side
  6. Is there a CSS selector for the first direct child only?
  7. Limit scope of external css to only a specific element?
  8. Why the content is not covered by the background of an overlapping element?
  9. How to animate underline from left to right?
  10. Drop-down menu that opens up/upward with pure css
  11. How to wrap text around an image using HTML/CSS
  12. Fullscreen responsive background image in CSS
  13. Bootstrap 4 Cards of same height in columns
  14. Gap in Bootstrap stacked rows
  15. CSS select elements with partial id
  16. What is the standard naming convention for html/css ids and classes? [closed]
  17. Mosaic of images HTML/CSS
  18. height: 100% for inside with display: table-cell
  19. How to add the text “ON” and “OFF” to toggle button
  20. How to make resizeable?
  21. Change Select List Option background colour on hover in html [duplicate]
  22. HTML form with multiple “actions”
  23. Hover effects not working with IE8
  24. How do I remove the default link color of the html hyperlink ‘a’ tag?
  25. Multiple submit buttons on HTML form – designate one button as default [duplicate]
  26. How to transform each side of a shape separately?
  27. Setting the image `width: 0` hides it, while `width: 0%` makes it occupy the space, too
  28. Fitting child into parent
  29. How to play CSS3 transitions in a loop?
  30. HTML canvas with scrollbar

Leave a Comment