Button with an image without using type="image"

Question

I want to add a button which looks like an image that I will assign but its type would not be "image". For example:

<input type="button" someimagetag="someimagelink" />

Not like

<input type="image" src="" />

How do I do that?

Why not just use a button element: <button><img src="path/to/image.png" /></button>? — David Thomas
– David Thomas, Commented Jan 3, 2012 at 23:40
Well, I tried what you said but it does not look in harmony with my image. Also, I'm trying to run a js method when the button is clicked and when it is clicked, it supposed to run in the background. Instead, it posts data by loading the action page. — gzg
– gzg, Commented Jan 3, 2012 at 23:49

leopic · Accepted Answer · 2012-01-03 23:38:18Z

1

You could style it as you would with any other element, using CSS.

Look at Twitter's Bootstrap http://twitter.github.com/bootstrap/ any element that uses the 'btn' class will use these styles:

.btn {
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    -moz-transition: all 0.1s linear 0s;
    background-color: #E6E6E6;
    background-image: -moz-linear-gradient(center top , #FFFFFF, #FFFFFF 25%, #E6E6E6);
    background-repeat: no-repeat;
    border-color: #CCCCCC #CCCCCC #BBBBBB;
    border-radius: 4px 4px 4px 4px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
    color: #333333;
    cursor: pointer;
    display: inline-block;
    font-size: 13px;
    line-height: normal;
    padding: 5px 14px 6px;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
}

Keep in mind they use CSS3 declarations to style their elements but you could use a background image just as well.

answered Jan 3, 2012 at 23:38

leopic

3,0232 gold badges29 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

gzg Over a year ago

It worked by using a background image. Change the style to this: background: transparent url(imgpath.jpg) no-repeat center top; For exact match with the image, width and height are needed to be set.

leopic Over a year ago

glad to hear it worked, would you mind setting my answer as the appropriate one?

Collectives™ on Stack Overflow

Button with an image without using type="image"

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related