How to create a UI button – Getting into the code

In this second part of the tutorial, we will use the same web button which we designed in the previous part by using Photoshop. In this one, we will show you how to write an html using code from the CSS styles to place a UI button on a web page.

Follow this step by step guide to learn how to write an HTML code for a UI button.


Step # 1 – Create a Blank Text Document

In the first step, place the UI button image which we created in the first part of this tutorial into a folder. Change this folder’s name to “Web_button” and create a blank text document in it.

Insert a blank text file

Step # 2 – Begin the HTML Code

Now double click on the text document to open it. Type in the “Html” tag as,

<html>

Here we are defining the CSS in the starting of the code by putting it in the head tag. For this purpose, open the Head tag, place the Style tag in it and define the “ID” of the button by placing “#” before its name as follows,

<head>

<style type="text/css">

#web_button

Start writing the html code

Step # 3 – Enter the Styling Code

Once done, enter the styling code for the web button as follows,

Display: block;

Width: 150px;

Height: 50px;

This will set the button placeholder in a block style of “150 pixels” width and “50 pixels” height. Note that we are setting the height equals to the half of the image as we want to show the upper part of the button here. Once done, type in the following code,

background: url(web_button.png) no-repeat 0 0;

This will set the button’s image over the link with specified position.

Insert the styling code

Step # 4 – Enter the Code for the Hover Image

Now in this step, we define the mouse roll over image by typing in the following code,

a:hover#web_button {background: url(web_button.png) no-repeat 0 -50px;}

This will set the same image however this time when the mouse rolls it over, the lower part of the button will be displayed. Now close the “Style” and the “Head” tag and move over to the body of the html page by entering the “Body” tag.

Insert a code for the hover image

Step # 5 – Enter the Anchor Tag

Now define an “Anchor” tag by putting the same “ID” as given previously, and the “Hyper Reference” to the page where you want to navigate the button. For this purpose, enter the following code,

<a id="web_button" href="http://www.paypal.com"></a>

Once done, using the Css styles coding close the “Anchor” tag and complete the HTML code by closing the “Body” tag and the “Html” tag.

Insert an anchor tag

Step # 6 – Save the Code as Html

After completing the code, save this file by typing its name as “web_button.html” and choose the “All Files” option from the drop down list.

Save this file to html

Step # 7 – Open the Html Page

After saving the file as html, go to the “Web_button” folder. There you will find your web_button.html file saved in it. Now double click on it to open the web page on a browser.

Launch the html page

Step # 8 – Using the Web Button

Once you have opened the html file, a browser window will open in front of your screen. There you will be able to see the ui button you created.

Start using the button