HTML BUTTONS

DataMine
by DataMine · 7 posts
10 years ago in HTML & CSS
Posted 10 years ago · Author
Understanding the basic syntax of the <button> tag

The basic syntax of the new <button> tag is like any other containment tag:

<button>.....</button>

<button>Some text here</button>

Unlike the <input type="button"> tag, the new <button> tag does not require the company of the <form> tag surrounding it in order to display.

Now, at first glance, the <button> tag looks like a normal form button, but as mentioned, its a little more than that.


Example Buttons

Back Button
Code
<button style="width:65;height:65" onClick="history.go(-1)"><b>Back</b></button>


Forward Button
Code
<button style="width:65;height:65" onClick="history.go(1)"><b>Forward</b></button>


Home Button
Code
<button style="width:65;height:65" onClick="window.location='http://www.SOMEWEBSITE.com'"><b>Home</b></button>


Reload Page Button
Code
<button style="width:65;height:65" onClick="window.location.reload()"><b>Reload</b></button>


Close Button
Code
<button style="width:65;height:65" onClick="window.close()"><b>Close</b></button>


Code
<button style="font: bold 14px Arial">Big text</button>

<button style="color: red"><b>Save the environment!</b></button>

<button><img src="kitty.gif" /></button>

<button>
    <table border="1" width="100%">
      <tr>
         <td width="19%"><img src="construct.gif" /></td>
         <td width="81%">Under Construction</td>
      </tr>
    </table>
 </button>


Controlling the width/height of the button

By default, the dimensions of the button is automatically set to the dimensions required to accommodate the content inside, such as an image. There will often be times when you want to manually control this dimension to fit your design. By using another CSS declaration, you can. To control the width/height of the button, use the following style declaration:

Code
style="width:whatever_width;height:whatever_height"



Opening a new window with the specified document:

Code
<button onClick="window.open('mydocument.htm')">Open second window!</button>
Posted 10 years ago
Thanks this is awsome
Posted 9 years ago
understood! someone try it, wanna know if work

Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 2</title>
<script type="text/javascript">
<!--
function FP_swapImg() {//v1.0
 var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2; n<args.length;
 n+=2) { elm=FP_getObjectByID(args[n]); if(elm) { doc.$imgSwaps[doc.$imgSwaps.length]=elm;
 elm.$src=elm.src; elm.src=args[n+1]; } }
}

function FP_preloadImgs() {//v1.0
 var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array();
 for(var i=0; i<a.length; i++) { d.FP_imgs[i]=new Image; d.FP_imgs[i].src=a[i]; }
}

function FP_getObjectByID(id,o) {//v1.0
 var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id);
 else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el;
 if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c)
 for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; }
 f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;
 for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } }
 return null;
}
// -->
</script>
</head>

<body onload="FP_preloadImgs(/*url*/'button9.jpg',/*url*/'buttonA.jpg')">

<a href="https://www.imvumafias.org/headquarters.html">
<img style="border: 0" id="img1" src="button8.jpg" height="33" width="101" alt="IMVU MAFIA" onmouseover="FP_swapImg(1,0,/*id*/'img1',/*url*/'button9.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img1',/*url*/'button8.jpg')" onmousedown="FP_swapImg(1,0,/*id*/'img1',/*url*/'buttonA.jpg')" onmouseup="FP_swapImg(0,0,/*id*/'img1',/*url*/'button9.jpg')" /><!-- MSComment="ibutton" fp-style="fp-btn: Embossed Tab 1" fp-title="IMVU MAFIA" --></a>

</body>

</html>
Posted 9 years ago · Author
axiom wrote:
understood! someone try it, wanna know if work


Please pose your code inside code tags in the future :
Code
[code][/code]
I went ahead and edited your post for you :)

As for your code..it does not work. I notice your JavaScript is all referencing local files. What exactly are you trying to do with this?
Posted 9 years ago · Author
axiom wrote:
ahah... was a button "imvu mafia" with hyperlink to the home page
http://gyazo.com/eb62bf2d5443367f3c79c80000e90d8b


It would probably work if you replaced the paths to your images with image urls, otherwise you'd have to send me the image files as well.

If I change them to an image url, it works fine. That's a lot of code for something so simple though, a bit overkill.
Posted 9 years ago
understood. thanks

Create an account or sign in to comment

You need to be a member in order to leave a comment

Sign in

Already have an account? Sign in here

SIGN IN NOW

Create an account

Sign up for a new account in our community. It's easy!

REGISTER A NEW ACCOUNT
Select a forum Protection     Help & Support     Introductions     Mafia News     IMVU News General Discussion     IMVU Lounge        IMVU Series / Roleplaying        Social Games     Mafia Market     Mafia Tools        Premium IMVU Tools        Off Topic Tools     Off Topic     Contests Creator Corner     Graphics Design        Photoshop        GIMP     Basic Creator Help     Catalog And Product Showcase     3D Meshing        3Ds Max        Sketchup        Blender Gangsters with Connections     White Hat Activities        Google Hacking        Trackers Programming Corner     Coding        Python        .Net (C#, VB, etc)        Flash        JAVA        Autoit        Batch        HTML & CSS        Javascript        PHP        Other        IMVU Homepage Codes           General           About me Panel           Messages Panel           Special Someone Panel           Visitors Panel           New Products Panel           Rankings Panel           Wishlist Panel           My Badges Panel           Outfits Panel           Url Panel           Groups Panel           Slideshow Panel           My Room Panel           Sandbox panel           Layouts     Help & Requests Free Credits     Approved Methods     Submit Methods Free Money     Approved Methods     Submit Methods Adult Corner     Get Mafia AP Here     AP Lounge        AP Social Games        Casual Dating Tips     IMVU Slave Market & Escorts