Buttons are used in a web site primarily for navigation or in a web form for the end-user to click to perform an action such as submitting the form or simply to reset the changes made in the case of a very long forms. For the most part, web designers have to first create individual images in a graphic design program sch as Photoshop or Fireworks.
To add a button to a web form you can either use for instance the HTML tag
<input type=”submit” value=”Submit” id=”btnsubmit”>
to add a submit button or
<input type=”image” src=”path_to_image” id=”btnsubmit”>
if you prefer to use some fancy image as a submit button.
In the first case the styling of the button is left to the web browser. However you can apply a custom CSS style using the “btnsubmit” ID selector specified in the button markup.
For instance:
#btnsubmit {
width:70px; /* defines the width of the button */
height:35px; /* defines the height of the button */
padding:0; /* removes any padding */
text-align:center; /* horizontally center the text */
line-height:30px; /* vertically centers text */
background:#efefef; /* light grey background color */
color:#000; /* text color in black */
font-weight:bold; /* makes the text bold */
border: 2px outset #fff; /* creates a bevel effect at the right and bottom */
}
yields
You could also add a margin to help position that button against its closest HTML elements in the page.
Using CSS3 border-radius property, you can create a button with round corners by adding the following to the CSS style above:
#btnsubmit {
width:80px;
height:40px;
padding:0;
text-align:center;
line-height:30px;
background:#f9f9f9;
color:#000;
border:solid 3px #ccc; /* add a solid grey border of 3 pixels in thickness */
font-weight:bold;
border-radius:20px;
}
Yields:
Do keep in mind that the border-radius property is not yet universally adopted. You might need to add the prefix -moz-, -webkit-, -ms-, -o- to make it work with some of the modern web browsers except IE6, IE7 and IE8.
Those same CSS rules could be use with an HTML anchor tag. For instance:
<a href=”http://livetrainingsession.com” id=”btnhome”>Home</a>
#btnhome{
width:75px; /* defines the width of the button */
height:30px; /* defines the height of the button */
padding:0; /* remove any padding */
text-align:center; /* vertically centers text */
background:#f9f9f9; /* light grey background color */
color:#000; /* text color in black */
border:solid 3px #ccc;
border-radius:20px;
display:inline-block; /* forces to match the specified width */
text-decoration:none; /* remove the underline */
font: bold 13px/28px Verdana, Geneva, sans-serif;
}
You can various combinations of background color, border color to achieve some interesting button designs.
If any approach shown above does not satisfy the look-and-feel you are after, you can still design a graphic button then use it as a background image instead. This approach will give you more flexibility in terms of site maintenance or when the time comes to adapt your site for mobile devices.
