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?


Recommended Answers

All 7 Replies

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.

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

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.