Button links from a provided set

**TLPG** · 05-25-2012 02:07 AM

I need to make these buttons work to go to other pages on the website I am working on. This is what I was provided with;

Code:

<form method="POST" action="--WEBBOT-SELF--" onSubmit="">
<input type="reset" value="Home" name="B1" style="background-color: #FFFF00; font-family: Arial; font-weight: bold; list-style-type: font-family; border-style: solid">
<input type="reset" value="News" name="B3" style="background-color: #FFFF00; font-weight: bold; border-style: solid">
<input type="reset" value="Bookings" name="B6" style="font-family: Arial; font-weight: bold; background-color: #FFFF00; border-style: solid">
<input type="reset" value="Roster" name="B5" style="font-weight: bold; background-color: #FFFF00; border-style: solid">
<input type="reset" value="N.A.W Arena" name="B12" style="font-weight: bold; background-color: #FFFF00; border-style: solid">
<input type="reset" value="Events" name="B4" style="background-color: #FFFF00; font-weight: bold; border-style: solid">
<input type="reset" value="Community" name="B9" style="background-color: #FFFF00; font-weight: bold; border-style: solid; border-color: #000000">
<input type="reset" value="Links" name="B8" style="font-weight: bold; background-color: #FFFF00; border-style: solid">
<input type="reset" value="Sponsors" name="B11" style="font-weight: bold; background-color: #FFFF00; border-style: solid">
<input type="reset" value="Memberships" name="B10" style="background-color: #FFFF00; font-weight: bold; border-style: solid">
<input type="reset" value="Fan Photos" name="B13" style="font-weight: bold; background-color: #FFFF00; border-style: solid">
<input type="reset" value="Videos" name="B14" style="font-weight: bold; background-color: #FFFF00; border-style: solid">
<input type="reset" value="Facebook" name="B15" style="font-weight: bold; background-color: #FFFF00; border-style: solid">
<input type="reset" value="Twitter" name="B16" style="font-weight: bold; background-color: #FFFF00; border-style: solid">
<input type="reset" value="Contact Us" name="B7" style="font-weight: bold; background-color: #FFFF00; border-style: solid">
</form>

Now how do I change the input codes to incorporate the pages the buttons go to? I'm not finding anything at a glance.

**nap0leon** · 05-25-2012 07:58 AM

type=reset resets form fields... they dont go anywhere.

**coothead** · 05-25-2012 10:38 AM

Hi there TLPG,

and a warm welcome to these forums.

Here is an example for you to try...

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title>button links</title>

<style type="text/css">
body {
    background-color:#f0f0f0;
 }
#nav-h {
    padding:0;
    margin:0;
    list-style-type:none;
    text-align:center;
 }
#nav-h li {
    display:inline;
 }
#nav-h a {
    text-decoration:none;
 }
#nav-h button {
    cursor:pointer;
 }

#nav-v {
    width:120px;
    padding:0;
    margin:0;
    list-style-type:none;
 }
#nav-v li {
    margin:4px 0;
 }
#nav-v a {
    text-decoration:none;
 }
#nav-v button {
    width:100%;
    cursor:pointer;
 }
</style>

</head>
<body>

<ul id="nav-h">
 <li><a href="index.html"><button>Home</button></a></li>
 <li><a href="news.html"><button>News</button></a></li>
 <li><a href="bookings.html"><button>Bookings</button></a></li>
 <li><a href="roster.html"><button>Roster</button></a></li>
 <li><a href="nawarena.html"><button>N.A.W. Arena</button></a></li>
 <li><a href="events.html"><button>Events</button></a></li>
 <li><a href="community.html"><button>Community</button></a></li>
 <li><a href="links.html"><button>Links</button></a></li>
 <li><a href="sponsors.html"><button>Sponsors</button></a></li>
 <li><a href="#"><button>Memberships</button></a></li>
 <li><a href="fanphotos.html"><button>Fan Photos</button></a></li>
 <li><a href="videos.html"><button>Videos</button></a></li>
 <li><a href="http://www.facebook.com/"><button>Facebook</button></a></li>
 <li><a href="http://www.twitter.com/"><button>Twitter</button></a></li>
 <li><a href="contactus.html"><button>Contact Us</button></a></li>
</ul>

<ul id="nav-v">
 <li><a href="index.html"><button>Home</button></a></li>
 <li><a href="news.html"><button>News</button></a></li>
 <li><a href="bookings.html"><button>Bookings</button></a></li>
 <li><a href="roster.html"><button>Roster</button></a></li>
 <li><a href="nawarena.html"><button>N.A.W. Arena</button></a></li>
 <li><a href="events.html"><button>Events</button></a></li>
 <li><a href="community.html"><button>Community</button></a></li>
 <li><a href="links.html"><button>Links</button></a></li>
 <li><a href="sponsors.html"><button>Sponsors</button></a></li>
 <li><a href="#"><button>Memberships</button></a></li>
 <li><a href="fanphotos.html"><button>Fan Photos</button></a></li>
 <li><a href="videos.html"><button>Videos</button></a></li>
 <li><a href="http://www.facebook.com/"><button>Facebook</button></a></li>
 <li><a href="http://www.twitter.com/"><button>Twitter</button></a></li>
 <li><a href="contactus.html"><button>Contact Us</button></a></li>
</ul>

</body>
</html>

coothead

**TLPG** · 06-18-2012 07:03 PM

One problem with your help, Coothead - the colour was lost (yellow instead of grey). Do you have a code to fix that up?

Otherwise, that's great!

**coothead** · 06-19-2012 12:37 AM

Hi there TLPG,

how does this look...

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title>button links</title>

<style type="text/css">
body {
    background-color:#f0f0f0;
 }
#nav-h {
    padding:0;
    margin:0;
    list-style-type:none;
    text-align:center;
 }
#nav-h li {
    display:inline;
 }
#nav-h a {
    text-decoration:none;
 }
#nav-h button {
    padding:2px 8px;
    border:1px solid #000;
    border-radius:4px;
    cursor:pointer;
    background-color:#ff6;
    box-shadow:1px 1px 1px #999;
    outline:0;
 }
#nav-h button:hover {
    background-color:#ff0;
 }
#nav-h button:active {
    padding:2px 6px 2px 10px;
    box-shadow:inset 1px 1px 1px #999;
 }
#nav-v {
    width:120px;
    padding:0;
    margin:0;
    list-style-type:none;
 }
#nav-v li {
    margin:4px 0;
 }
#nav-v a {
    text-decoration:none;
 }
#nav-v button {
    width:100%;
    padding:2px 0;
    border:1px solid #000;
    border-radius:4px;
    cursor:pointer;
    background-color:#ff6; 
    box-shadow:1px 1px 1px #999; 
    outline:0;
 }
#nav-v button:hover {
    background-color:#ff0;
 }
#nav-v button:active {
   padding:2px 0 2px 2px;
   box-shadow:inset 1px 1px 1px #999;
 }
</style>

</head>
<body>

<ul id="nav-h">
 <li><a href="index.html"><button>Home</button></a></li>
 <li><a href="news.html"><button>News</button></a></li>
 <li><a href="bookings.html"><button>Bookings</button></a></li>
 <li><a href="roster.html"><button>Roster</button></a></li>
 <li><a href="nawarena.html"><button>N.A.W. Arena</button></a></li>
 <li><a href="events.html"><button>Events</button></a></li>
 <li><a href="community.html"><button>Community</button></a></li>
 <li><a href="links.html"><button>Links</button></a></li>
 <li><a href="sponsors.html"><button>Sponsors</button></a></li>
 <li><a href="#"><button>Memberships</button></a></li>
 <li><a href="fanphotos.html"><button>Fan Photos</button></a></li>
 <li><a href="videos.html"><button>Videos</button></a></li>
 <li><a href="http://www.facebook.com/"><button>Facebook</button></a></li>
 <li><a href="http://www.twitter.com/"><button>Twitter</button></a></li>
 <li><a href="contactus.html"><button>Contact Us</button></a></li>
</ul>

<ul id="nav-v">
 <li><a href="index.html"><button>Home</button></a></li>
 <li><a href="news.html"><button>News</button></a></li>
 <li><a href="bookings.html"><button>Bookings</button></a></li>
 <li><a href="roster.html"><button>Roster</button></a></li>
 <li><a href="nawarena.html"><button>N.A.W. Arena</button></a></li>
 <li><a href="events.html"><button>Events</button></a></li>
 <li><a href="community.html"><button>Community</button></a></li>
 <li><a href="links.html"><button>Links</button></a></li>
 <li><a href="sponsors.html"><button>Sponsors</button></a></li>
 <li><a href="#"><button>Memberships</button></a></li>
 <li><a href="fanphotos.html"><button>Fan Photos</button></a></li>
 <li><a href="videos.html"><button>Videos</button></a></li>
 <li><a href="http://www.facebook.com/"><button>Facebook</button></a></li>
 <li><a href="http://www.twitter.com/"><button>Twitter</button></a></li>
 <li><a href="contactus.html"><button>Contact Us</button></a></li>
</ul>

</body>
</html>

coothead

**TLPG** · 07-12-2012 04:09 AM

That's great! Thanks for your help!

**coothead** · 07-12-2012 04:52 AM

No problem, you're very welcome.

coothead

Thread: Button links from a provided set

Thread Tools

Display

Button links from a provided set

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions