Jump to content

to label a button


Recommended Posts

Hi there


I would like to label a button but so far I failed terribly. I tried the following...


<table border="0" cellspacing="0" cellpadding="0">


<td style="background-image(url:round_corner.gif)" width="116px" height="21px" align="center"><b>Home</b></td>




<input type="image" src="round_corner.gif" width="116px" height="21px" value="Home" onclick='return verify();'/>


Has anyone got an idea how this can be done properly?






[attachment deleted by admin]

Link to comment
Share on other sites

I am not sure what you mean with label a button, but if you want to set your own background image to a submit button (which is independent of javascript)


try the following:

<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
    display:block; /* use inline block if you want it to behave inline */
    cursor:pointer; /* little hand to show it's a button */
    background: url('round_corner.gif') no-repeat;
    <form action="" method="post">        
        <input type="submit" name="submit" class="fancybutton"/>

notice I gave submit a class and in css I set the properties for it instead of in the html itself. That way you separate concerns.


Ones you played with this and want a something more advanced, like a stretching button. Google for css sliding doors.


-edit: if you also validate your html/css most basic errors can easily be fixed

Link to comment
Share on other sites



Thank you very much cssfreakie, I really appreciate your help!




Before I forget. <input> is an inline element, to give it dimensions other than by adding a value. You need to display it block or inline-block. Ones you've done that you can style it the way you want. So that is what i did in the example given above.

good luck!

Link to comment
Share on other sites

This thread is more than a year old.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.