Question about buttons....... [Archive]

View Full Version : Question about buttons.......

Beaux

01-14-2003, 08:07 PM

Hi, I've run into a dillema. I made some buttons for my web site when I first started desiging it. I used some type of free web software. Now I can't remember where or how I made the buttons and I want to make more that look like them. I have tried to use the Anchor/Link function in First Page but I can't seem to make the button size bigger.

Here is the link to the page with the button I'd like to reproduce. http://www.applebytexas.com/hpindex.html

If there is any way to use the Anchor/Link option in First Page and make the buttons bigger, I'd really like to know how. If not is there any free software I can use to make the plain grey buttons similar to the ones I already have? thanks!!

cbkihong

01-14-2003, 08:33 PM

It's an image button!

Unless you can find the original software to make it, you may need to find an image editing software like Photoshop or the like, then you can erase the word and replace with something else. Enlarge the button is easy by enlarging the canvas and then move the pieces here and there.

Anchor/link in 1st Page only creates text-based links, not buttons anyway.

Why don't you make a new set of buttons from scratch again?

ByteWizard

01-15-2003, 05:10 AM

Why not just use CSS and eliminate any images

<style>
div.button {
display: block;
width: 100px;
height: 35px;
background-color: #999999;
border-style: outset;
text-align: center;
color: black;
font: 24px arial, verdana; sans-serif;
padding: 2px 0px;
{
</style>

and the HTML
<div class="button">
Gallery1
</div>

ByteWizard

01-15-2003, 06:13 AM

Sorry,

I meant to give you an image of the button created with the code...

ByteWizard

01-15-2003, 06:29 AM

David...

I believe your version will not center the text vertically :D

Zero Angel

01-15-2003, 07:27 AM

The best way to center text vertically, IMO is to use padding instead of height. If you plan to make only a single button, then you're best off using something like this in your HEAD portion of your document:<style type="text/css">

</style>
And this in your BODY:<a href="whatever.html" class="button">Gallery 1</a>
This will work well for a single button. If you want to make the button wider, then you just have to edit the width attribute. If you want the button to have more or less padding, then you just have to edit the Padding attribute, etc.

Note that the order for padding are as follows:
Top Right Bottom Left -- so 2px 0px 4px 0px, adds 2pixels padding to the top and 4 to the bottom.

Zero Angel

01-15-2003, 07:35 AM

Now, if you want to make an array of links (several at once), then you're best off using something called contextual selectors, which means that styles will only be applied within certain other styles.

Lets try making several links at once, place this in the head portion of your code:.buttonarray a {
display:block;
width: 100px;
background-color: #999999;
border: 2px outset #CCC;
text-align: center;
color: black;
font-family: helvetica,arial, verdana, sans-serif;
padding: 2px 2px 2px 2px;
color: #000;
text-decoration: none;
margin: 2px 0px 2px 0px;
font-weight: bold;
}
Notice that all of the attributes are the same, except the selector has been changed from .button to .buttonarray a, this tells the browser to only apply that style to all <A> tags within a container (like DIV) that has the class buttonarray.

OK, now try placing this code in the BODY of your document:<div class="buttonarray">
<a href="gallery1.html">Gallery 1</a>
<a href="gallery2.html">Gallery 2</a>
<a href="gallery3.html">Gallery 3</a>
<a href="gallery4.html">Gallery 4</a>
</div>
As you can see, you dont have to specify the class for each button, making it a little easier to update.

Hope this helps,
~Yet another David

ByteWizard

01-15-2003, 07:55 AM

I feel like this is dueling buttons...

-I used height & width to make my button the same size as the original. This can be adjusted as desired.
-I used padding to center the text vertically and text-align:center to center the text horizontally
-I specified a font size and family to keep from using the default

-text-decoration: none is a good addition

I personally use a <div> for each button

DCElliott

01-15-2003, 08:50 AM

Zero has the best implementation IMO. He also caught the errant ';' in the font list perpetrated by two folks who should know better. :p

Contextual selectors are really nice for this because you can make links behave differently according to what part of the page they "live" in. For example #nav a {} would have a button style, while #main a {} would have an ordinary style. The nice thing is you don't then have to add class="" attributes to all your <a > tags.

Zero Angel

01-15-2003, 12:51 PM

Now, If you really want to get fancy, you can use the a:hover selector for your link buttons to change the buttons appearance when the user hovers his/her mouse over it, and even float the containing DIV to the left.

Take this example, paste this in your HEAD container:<style type="text/css">

</style>
And place this in your BODY:<div class="button">
Page Navigation
<a href="#">Test 1</a>
<a href="#">Test 2</a>
<a href="#">Test 3</a>
<a href="#">Test 4</a>
</div>And there ya go, a fancy looking hover effect. Look ma! No javascript!

Another thing to note is that the DIV will be floated to the left, which means that text will flow around it, just like an image. To disable this behavior, just delete the float attribute.

I know this is a but much, but i'm a showoff :p

http://www.kahkewistahaw.com/misc_files/buttonfloat.gif

P.S.: Netscape 4 doesnt like my button CSS code. Thats something to take into consideration depending on your audience. Last time I checked, about +90% of people were using IE 5+ as their primary browser.

HZR

01-15-2003, 02:00 PM

That CSS could need some (nothing major) cleaning-up.
You should turn it into an unordened list too.
Netscape 4 doesnt like my button CSS code
Netscape 4 sucks at CSS.
Who cares about NS4 anyway. As long as they can see the text I'm satisfied.

Zero Angel

01-15-2003, 02:21 PM

Actually, the buttons appear OK, but for some reason, they're not clickable. But you're right, who cares about Netscape 4? People who use it are probably used to seeing errors by now :p

I've noticed that the code needs slight cleaning, but its something that I quickly wrote 'on the fly' right while I was on the forums.

The 'list' method interests me, though I dont yet see the advantages of it. Perhaps you can teach me? (I'm not done learning yet!)

ByteWizard

01-15-2003, 04:27 PM

He also caught the errant ';'

Just goes to show you how easily the young are misled...

HZR

01-16-2003, 09:09 AM

The 'list' method interests me, though I dont yet see the advantages of it. Perhaps you can teach me? (I'm not done learning yet!)
I use it because it actually is a list of links, so it shall be in a list. It also degrades much nicer in text-only browsers and so on.

DCElliott

01-18-2003, 06:08 AM

Lists degrade beautifully in non CSS browsers.

Beev

01-24-2003, 02:38 AM

Here is my basic attempt at CSS Rollover Buttons.

<style>
.rolltd a
{
font-family: Verdana;
color: white;
font-size: 12px;
display: block;
background-color: black;
text-decoration: none;
width: 100%;
height: 100%;
}

.rolltd a:hover
{
color: black;
display: block;
text-decoration: none;
background-color: silver;
}

</style>

And the HTML is:

<table width="100" cellpadding="0" cellspacing="0">
<tr align="center" valign="middle">
<td class="rolltd" align="center"><a href="#">Button 1</a></td>
</tr>
<tr>
<td class="rolltd" align="center"><a href="#">Button 2</a></td>
</tr>
<tr>
<td class="rolltd" align="center"><a href="#">Button 3</a></td>
</tr>
<tr>
<td class="rolltd" align="center"><a href="#">Button 4</a></td>
</tr>
</table>

Hope that works. Ive never posted raw code before.

Here is a example: