0

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.

2
Contributors
1
Reply
2
Views
6 Years
Discussion Span
Last Post by Graphix
0

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

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.