Buttons as a link without javascript 4

[skiflyer]

I have plenty of buttons on a site of mine which help people navigate around... but I don't want simple links because of the look and feel.

However, using javascript and an onClick event kills the ability to open in a new window/tab at the users desire... not to mention would break in a non-javascript environment (not a big concern of mine, it's an intranet application)

But I was wondering, if anyone had a way of using the buttons with the onClick event, or maybe some CSS to wrap an HREF in to make it look like a button.

I guess my other option is to use an image?

 

[cLFlaVA]

One way:

<form name="f" action="about_us.html" method="post">
  <input type="submit" value="About Us" />
</form>

Plus, javascript allows you to browse in the same window or different windows, whichever you desire.

*cLFlaVA
----------------------------
[tt]insert funny quotation here.[/tt]

 

[skiflyer]

Whichever I as the coder desire, but not what the user desires... or am I mistaken?

And the above method def. addresses losing the javascript, so thank you for that, but unfortunately it doesn't help me any with the new window/tab discussion.

 

[tgreer]

My site has an example of using CSS to make links look like buttons.

http://www.tgreer.com

Visit the Articles page. There you can click on different "styles". In particular, the "olive" style has the links in their own container.

The basic idea is to put the links in a <div>, give the div a background (optional), and then to use an "inset" or "outset" CSS border.

If the site helped you, consider clicking some of the ads to help support it.



Thomas D. Greer

http://www.tgreer.com

Providing PostScript & PDF
Training, Development & Consulting

 

[tgreer]

Sorry, it's the "white" style that has the links look like buttons.

I put the links in a div, then use the <h2> tag (you could use a <span> just as well, and then put the hyperlinks within the <h2>'s.

By setting the proper padding, align, and border properties of the <h2> or <span>, you can make the links look like buttons.



Thomas D. Greer

http://www.tgreer.com

Providing PostScript & PDF
Training, Development & Consulting

 

[Vragabond]

Don't use improper html elements just because they look like what you need. Style proper elements to look like what you need. These are simple <a>s:

<style type="text/css">
a:link,
a:visited {
    float: left;
    margin: 2px 5px 2px 5px;
    padding: 2px;
    width: 100px;
    border-top: 1px solid #cccccc;
    border-bottom: 1px solid black;
    border-left: 1px solid #cccccc;
    border-right: 1px solid black;
    background: #cccccc;
    text-align: center;
    text-decoration: none;
    font: normal 10px Arial;
    color: black;
}

a:hover { background: #eeeeee; }

a:active {
    border-bottom: 1px solid #eeeeee;
    border-top: 1px solid black;
    border-right: 1px solid #eeeeee;
    border-left: 1px solid black;
}
</style>
<a href="#">Button 1</a><a href="#">Button 2</a><a href="#">Button 3</a>

 

[tgreer]

Very nice! I wasn't aware of the "active" modifier. Learn something new everyday.

Thomas D. Greer

http://www.tgreer.com

Providing PostScript & PDF
Training, Development & Consulting

 

[skiflyer]

Couldn't agree more Vragaband...just didn't know how to pull it off. Thanks you!

 

[CliveC]

Good idea Vragabond! Star!
I took the idea a step further to use button images with three different button states:

<style type="text/css">
a {width:180px; height:32px;
padding-top: 5px;
background-image:url('button1.gif');
background-repeat:no-repeat;
font: normal 10px Arial;
text-align: center;
text-decoration: none}
a:hover {background-image:url('button2.gif')}
a:active {background-image:url('button3.gif')}
</style>
<a href="#">Button 1</a>
<a href="#">Button 2</a>
<a href="#">Button 3</a>

Clive

http://tubularity.com

http://PalliativeCareConsulting.org

 

[ChrisHunt]

I've used a further refinement to get resizeable buttons on pages like

http://www.leicesteryha.org.uk/cgi-bin/leoevdets?eno=32

. Try changing your text size when viewing that page and you'll see the buttons grow and shrink to accomodate it (within reason anyway).

Under the hood it's not all that pretty - it uses three nested <span>s:

<a class="fakebutton" href="[URL unfurl="true"]http://www.multimap.com"[/URL] title="">
<span class="buta"><span class="butb"><span class="butc">
Location Map
</span></span></span></a>

Then a corner image can be given to each of the four elements (1 <a>, 3 <span>s):

a.fakebutton  {
   display : block;
   background : #669966 url(images/buttl.gif) no-repeat 0% 0%;
   width : 10em;
   font-weight : bold;
   color : #ffff99;
   text-decoration : none;
   text-align : center;
   margin-top : 0;
   margin-bottom : 2px;
}

a.fakebutton span {
   display : block;
}

.buta {
   background : url(/images/buttr.gif) no-repeat 100% 0%;
}

.butb {
   background : url(/images/butbr.gif) no-repeat 100% 100%;
}

.butc {
   padding : 7px 20px 18px 10px;
   background : url(/images/butbl.gif) no-repeat 0% 100%;
}

a.fakebutton:hover {
   color : white;
   text-decoration : underline;
}

a.fakebutton:active {
   margin-top : 2px;
   margin-bottom : 0;
}

a.fakebutton:active .buta {
   background-image : url(/images/buttrd.gif);
}

a.fakebutton:active .butb {
   background-image : url(/images/butbrd.gif);
}

a.fakebutton:active .butc {
   background-image : url(/images/butbld.gif);
}

For some reason FF ignores the :active rules (any ideas?), but the buttons click down nicely in IE.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd