How to Make a Cool Button Effect in HTML

Creating an HTML button involves simple coding and does not require web design experience.

HTML buttons are easy to create and they can be made to do cool things beyond their practical purposes. For example, buttons can be made to change the color of the page or the color of the text. This is done using the HTML "onClick" command in the code. This could be used on a website to allow readers to customize the color of the web page and format the color of the text for easier reading. Here is how to put together this cool effect:

Instructions

1. Open a program that can create and edit HTML documents. On a Windows PC, Microsoft Notepad is a good choice. It can be found by pushing the "Start" button in the lower corner of the screen and navigating to "All Programs," "Accessories" and then "Notepad." On an Apple Mac, Text Editor will work. Open this program from the Dock or the applications folder.

2. Type the following in the program: <form>
   This code begins all HTML buttons. Buttons are part of an HTML classification called "forms" and this indicate a new form button will be made.

3. Add this line of code below <form>: <input type="button" value="Blue" onClick="document.bgColor = '#0000FF';">
   This is the code that makes the button and tells it what to do. The "input type" indicates a button is being created (a different name would be entered for creating other items in a form, such a text box). The "value" is what text will be written on the button. In this case, it is "Blue." And the "onClick" command is tells the button what to do when the user clicks it. In this case it is told to turn the page blue. The number/letter combination in the code is blue is written in HTML color code.

4. Add this line of code below the one above: <input type="button" value="Blue" onClick="document.bgColor = '#0000FF';document.fgColor='#FFFFFF';">
   This line of code will do the same thing as the one in Step 3 but with two changes. Notice the "value" has been changed to "Red" and the HTML color code has changed too. When the button is pushed, it will now turn the page background red based upon the color code.
   Also, notice the additional "document.fgColor" code after the semicolon. This is another command that can be added to a button — changing the page font color. Pushing this button will change the font color to white, however any color code can be substituted in place of "FFFFFF" (white).

5. Close out the code by putting this code below everything: </form>
   This indicates the form’s elements, including the rounded button are finished.

6. Push return twice. Then, type some text. This can be anything that is at least a few sentences long. This is needed to demonstrate Step 4.

7. Save the HTML document. In Microsoft Notepad, go to "File" and click on "Save As." Enter a file name for the document and end it with “.html” Click "Save." On a Mac computer, click on "File" at the top of the page and then "Save As." Enter a file name for the document and change the format from Rich Text to HTML webpage using the drop-down menu below.

8. Double click on the document to have it open in a default browser. Push the buttons to see the background color change and text change effects.

References

• Code Lifter; Change the Page Background Color and/or Font Color With Buttons

Resources

• Computer Hope: HTML Color Codes and Names