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.

Rounded corners is difficult if you want the browser to make it, but you can just simply use a image as background, that has rounded corners:

.Button2 {
background-image:url('images/button_out.png');
background-color:none;
border:0px solid red;
padding:0px;
width:100px;
height:20px;
}
.Button2:hover {
background-image:url('images/button_on.png');
background-color:none;
border:0px solid red;
padding:0px;
width:100px;
height:20px;
}

Also when you dont want to use a image, use regular CSS for it:

.Button1 {
font-family:Arial;
font-size:13px;
padding:2px;
border:1px solid white;
background-color:navy;
width:100px;
height:20px;
}
.Button1:hover {
font-family:Arial;
font-size:13px;
padding:2px;
border:1px solid navy;
background-color:white;
width:100px;
height:20px;
}

~G

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.