I have created a button in the body my web page using the following code below:

<input type=button onClick="parent.location='btb-lad-home.htm'" value='Home' style="font-family: comic sans ms; background-color: #872175" >

(I have no code for my button in the head of my web page.)

Although the code above creates a button with now problem the button is kind of plain.

I have been searching for more code to make my button more appealing, ie rounded corners.

Does anyone have any suggestions for code that I can add to create rounded corners on my button. Or any other effects?


6 Years
Discussion Span
Last Post by logoonlinepros

I think it is complicated to apply a style to a button. The buttons are displayed differently on different browsers, e.g. in FF they have rounded corners.

You can simply use an image as a button and apply your own styles to the image:

<img src="/images/my_button.gif" alt="The text on the image" onclick="parent.location='btb-lad-home.htm';" />

You can define a class and apply a hover action like move or display another image instead. This will be shown the same way on all browsers.


<button type="button">Click Me!</button>
Inside a button element you can put content, like text or images. This is the difference between this element and buttons created with the input element.


Buttons are hard to style, and tend to look different in different browsers.
Buttons are meant to be part of a data collection form, and should not really be used for ordinary links - that's what the "<input type=button" is saying. Input, as in data input.

You hear people talking about links as buttons and so many people wrongly call any link a button. If you want a pretty link, learn CSS and style your links that way.


It depends on your browser.
Use an Image if you want to make it look the way you want.


I almost always use this code:

<a href="http://address.html" onmouseover="image1.src='button-over.gif';"
<img name="image1" src="button.gif"   alt="Home"> </a>

If you want to input several buttons, just change the name of the "image1" to the "image2" etc.

Edited by tealendril: marking image name


In different browser this buttons show different result .
IE explore give bad result while other browser show it perfect.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.