Member Avatar for Griffin54

Hello!

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?

Thanks.

  • 8 Contributors
  • 7 Replies
  • 158 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by logoonlinepros
Member Avatar for Baradaran

Hi,
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.

Member Avatar for johnamold

<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.

Member Avatar for drjohn

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.

Member Avatar for terabyte

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

Member Avatar for tealendril

I almost always use this code:

<a href="http://address.html" onmouseover="image1.src='button-over.gif';"
onmouseout="image1.src='button.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 because: marking image name
Member Avatar for logoonlinepros

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.