How to Create a Button at the Top of a Website Page
Website designers often use images to create buttons used as parts of menus or graphical links to other pages. Any digital image on your computer can become a button on a website. However, you may want to edit an image in a graphics program, such as Microsoft's "Paint", to create a button that fits the size and style that your website requires. Once you have created the button, you must upload it to your website host and use HTML code to place it in the coding of your website.
Other People Are Reading
Instructions
-
Create Button Image
-
1
Launch the "Paint" program on your computer. This program is the built-in graphics-editing software that comes with the Windows operating system. You can find this in the "Accessories" folder of the "All Programs" section on the Start Menu.
-
2
Click "File" and "Open" to browse your computer for an existing image if you would like to import an image to your button. Otherwise, you can draw and edit the blank canvas provided by "Paint."
-
-
3
Click the "Select" tool from the toolbox and then drag your mouse across the image to select a piece of the image about the same size that you would like to make your button. This will highlight a part of the canvas.
-
4
Click "Image" and then click "Crop" to remove the extra area outside of your button, leaving only the button itself to work with.
-
5
Use drawing tools such as the "Pencil," "Line," "Brush" and "Fill" tools to draw designs on the canvas.
-
6
Click the "Text" tool and then click on the button to create a text box.
-
7
Select a font style, size and color and then type words that you would like to include on the button.
-
8
Click "File" and then click "Save" to save the button as a graphic file on your computer.
Place Button on Website
-
9
Upload your button to your website host server or an online image hosting service. This will create a file online complete with a URL. Record this URL for future reference.
-
10
Open your Web page code in a text or online editor.
-
11
Locate the place in the code you would like to insert the button image. If you want the image to appear at the very top, you should place the button HTML code directly after the opening <body> tag.
-
12
Highlight the following code with your mouse and then right-click and click "Copy" from the menu:
<a href="websiteURL"> <img src="buttonURL"></a>
-
13
Right-click inside of your website's code in the location where you want your button to appear and and click "Paste." This will paste a copy of the button code in your website.
-
14
Highlight the "websiteURL" text and type the URL of the Web page you want the user to navigate to when he clicks the button. Do not remove the quotation marks.
-
15
Highlight the "buttonURL" text and type the URL of the button image. Do not remove the quotation marks.
-
16
Save the changes to your Web page and post the update to your website. When you view your page, you will now see your new button image at the top of your page.
-
1
References
- Photo Credit Dynamic Graphics/Dynamic Graphics Group/Getty Images
