Phat Button v1.0

	Print
	Email

Submitted on: 12/20/2001 7:00:47 PM
By: Mouse Pad
Level: Intermediate
User Rating:

By 6 Users
Compatibility:JavaScript

Users have accessed this code 4976 times.

(About the author)

This button is made strictly by code, no images needed, it has onmouse/onmouseout events to get that roll over effect, it changes cursor to the hand, has a tip message, and you can change its style to what ever colours you want, im currently working on a onclick event ("onclick=") to be able to enter another website, or it could even be used as a back button, so you have to stick with the form event. Btw "Phat" is now a word, just look in the latest dictionary.

code:
Can't Copy and Paste this?
Click here for a copy-and-paste friendly version of this code!

Terms of Agreement:
By using this code, you agree to the following terms...
1) You may use this code in your own programs (and may compile it into a program and distribute it in compiled format for languages that allow it) freely and with no charge.
2) You MAY NOT redistribute this code (for example to a web site) without written permission from the original author. Failure to do so is a violation of copyright laws.
3) You may link to this code from another website, but ONLY if it is not wrapped in a frame.
4) You will abide by any additional copyright restrictions which the author may have placed in the code or code's description.


//**************************************
//     
// Name: Phat Button v1.0
// Description:This button is made stric
//     tly by code, no images needed, it has on
//     mouse/onmouseout events to get that roll
//     over effect, it changes cursor to the ha
//     nd, has a tip message, and you can chang
//     e its style to what ever colours you wan
//     t, im currently working on a onclick eve
//     nt ("onclick=") to be able to enter anot
//     her website, or it could even be used as
//     a back button, so you have to stick with
//     the form event. Btw "Phat" is now a word
//     , just look in the latest dictionary.
// By: Mouse Pad
//
// Inputs:Copy and paste all.
//
// Side Effects:Well I don't know about 
//     Netscape, I don't waste my time with It,
//     so you better use Internet Explorer
//
//This code is copyrighted and has// limited warranties.Please see http://
//     www.Planet-Source-Code.com/vb/scripts/Sh
//     owCode.asp?txtCodeId=2534&lngWId;=2//for details.//**************************************
//     

<HTML>
<HEAD>
<TITLE>super Button v1</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</HEAD>
<BODY bgcolor="#000000" text="#FFFFFF">
<FORM action=http://grimrt.digitalrice.com/forum/default.asp method=LINK>
<INPUT 
title="Isn't this Button Cool" 
onmouseover="javascript:this.style.backgroundColor='#336699'; 
javascript:this.style.color='#ffffff';
" style=" 
COLOR: #ffffff; 
BACKGROUND-COLOR: #333366;
BORDER-TOP-WIDTH: 1px; 
BORDER-TOP-COLOR: #33CCFF; 
BORDER-LEFT-WIDTH: 1px; 
BORDER-LEFT-COLOR: #33CCFF; 
BORDER-BOTTOM-WIDTH: 1px; 
BORDER-BOTTOM-COLOR: #33CCFF; 
BORDER-RIGHT-WIDTH: 1px; 
BORDER-RIGHT-COLOR: #33CCFF; 
CURSOR: hand"
onmouseout="javascript:this.style.backgroundColor='#333366'; "
type=submit 
value=Enter 
name=Enter>
</FORM>
</BODY>
</HTML>

Other 1 submission(s) by this author

Report Bad Submission

Your Vote!

Other User Comments

12/20/2001 7:20:34 PM:Mouse Pad

Theres alot code just for one button 
aye, I still think It's still smaller 
than using Images.

12/21/2001 9:56:08 AM:Gary Choma

Another way to do it is to put the 
style settings in an external style 
sheet (.css) 
file:
INPUT.PhatButton{
COLOR: 
#ffffff; 
BACKGROUND-COLOR: 
#333366;
BORDER-TOP-WIDTH: 1px; 
BORDER-TOP-COLOR: #33CCFF; 
BORDER-LEFT-WIDTH: 1px; 
BORDER-LEFT-COLOR: #33CCFF; 
BORDER-BOTTOM-WIDTH: 1px; 
BORDER-BOTTOM-COLOR: #33CCFF; 
BORDER-RIGHT-WIDTH: 1px; 
BORDER-RIGHT-COLOR: #33CCFF; 
CURSOR: hand;
FONT-SIZE:9pt; 
FONT-WEIGHT:bold
}
(put the above 
in a file named 
"PhatButton.css")
and replace the 
"style=" with "class='PhatButton'" in 
the INPUT tag.
Add this to the 
header section of the .htm file: "<link 
href="CoolButton.css" type="text/css" 
rel=stylesheet>"
Now it's real easy 
to use that same style button 
throughout your web site!

12/21/2001 3:59:06 PM:Joesph

Nice DHTML script there. But i would 
have done what Gary, said. Put the 
style in a css sheet and just call it 
from the input tag. Keep up the good 
work.

12/21/2001 6:52:27 PM:Mouse Pad

Yes, your right, thats a very good way 
of doing it, i would of done it that 
way if i was going to use the same 
button 30 times, but if you want like 
only 2-4 buttons on your site, then u 
would use the original code, the next 
version will of course be much cleaner, 
and have ccs, etc etc. thx again Gary

Add Your Feedback!

Note:Not only will your feedback be posted, but an email will be sent to the code's author in your name.

NOTICE: The author of this code has been kind enough to share it with you. If you have a criticism, please state it politely or it will be deleted.

For feedback not related to this particular code, please click here.