HTML BUTTONS

by DataMine · 7 posts
11 years ago in HTML & CSS

Posted 11 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 11 years ago

Thanks this is awsome

Posted 10 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 10 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 10 years ago

ahah... was a button "imvu mafia" with hyperlink to the home page
http://gyazo.com/eb62bf2d5443367f3c79c80000e90d8b

Posted 10 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.

Product Requests

HTML BUTTONS

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

Create an account

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