CSS buttons

Grant Palin

11-03-2002, 05:29 AM

How can you create those neat, flat buttons? I've seen them on a number of website (none of which I can recall at this moment :( ). I figure they must be done using CSS, but how? I'd like to know how it's done, and maybe even use the technique myself.

redhead

11-03-2002, 08:59 AM

flat buttons? havent seen them myself but i iimagine it would be buttons with no border....

border: 0 0 0 0;

does that help?

Mr J

11-03-2002, 12:55 PM

How about these?

<style>
.button{width:100; height:20;text-align:center;font-size:10;vertical-align:center;border-top:4px solid #77aa44; border-left:4px solid #77aa44; border-right:4px solid #007700; border-bottom:4px solid #007700; background:#004400}

.buttonover{width:100; height:20;text-align:center;font-size:10;vertical-align:center;color:#00FF00;border-top:4px solid #77aa44; border-left:4px solid #77aa44; border-right:4px solid #007700; border-bottom:4px solid #007700; background:#006000}

.buttondown{width:100; height:20;text-align:center;font-size:9;vertical-align:center;color:#00AA00;border-top:4px solid #007700; border-left:4px solid #006600; border-right:4px solid #77aa44; border-bottom:4px solid #77aa44; background:#005000}
</style>

<div style="position:absolute; top:80; left:60;cursor:hand;color:white">

<div class="button" onmouseover="this.className='buttonover'" onmousedown="this.className='buttondown'" onmouseup="this.className='buttonover'" onmouseout="this.className='button'">BUTTON 1</div>

<div class="button" onmouseover="this.className='buttonover'" onmousedown="this.className='buttondown'" onmouseup="this.className='buttonover'" onmouseout="this.className='button'">BUTTON 2</div>

<div class="button" onmouseover="this.className='buttonover'" onmousedown="this.className='buttondown'" onmouseup="this.className='buttonover'" onmouseout="this.className='button'">BUTTON 3</div>

<div class="button" onmouseover="this.className='buttonover'" onmousedown="this.className='buttondown'" onmouseup="this.className='buttonover'" onmouseout="this.className='button'">BUTTON 4</div>

</div>

degsy

11-03-2002, 02:10 PM

Originally posted by Grant Palin
How can you create those neat, flat buttons? I've seen them on a number of website (none of which I can recall at this moment :( ). I figure they must be done using CSS, but how? I'd like to know how it's done, and maybe even use the technique myself.
Or if it's Form Buttons that you want then it's a similar process.

<style type="text/css">

</style>
</head>

<body>
<form name="form1" id="form1" method="post" action="">
<input type="submit" name="Submit" value="Submit" class="fancy" />
<input type="text" name="textfield" />
</form>

Grant Palin

11-03-2002, 06:14 PM

Thanks for those replies. That's kind of what I'm thinking about. The flat buttons I mentioned earlier, http://www.htmlcenter.com/tutorials/index.cfm/main/ has them for navigation buttons. That's where I saw them before. How are those done? Just modify the css for appearance?

degsy

11-03-2002, 06:31 PM

That site basically uses the same code as Mr J posted.

Another example

<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">

</style>
</head>

<body>
<table width="300" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="out" onmouseover="this.className='over'" onmouseout="this.className='out'">Link 1</td>
<td class="out" onmouseover="this.className='over'" onmouseout="this.className='out'">Link 2</td>
<td class="out" onmouseover="this.className='over'" onmouseout="this.className='out'">Link 3</td>
</tr>
</table>
</body>
</html>

Grant Palin

11-03-2002, 07:11 PM

So really the only difference is in the css that controls the appearance?

degsy

11-03-2002, 07:17 PM

yep :)

Grant Palin

11-03-2002, 09:16 PM

Okay, I guess I'll have to play with the CSS to get the right appearance. Thanks a lot for the help, and the examples.

Mr J

11-03-2002, 11:09 PM

Yep ..... just play around with the border and background colours

zoobie

11-03-2002, 11:42 PM

I wouldn't use those....but that's just me. :D

You can make a lot nicer buttons with beveled edges, shadow, gradients, images, etc. if you take the time. :cool:

degsy

11-04-2002, 12:24 AM

From the link he posted it looks like he was after a navigation bar rather than "buttons".

Grant Palin

11-04-2002, 03:11 AM

Yeah, that "bar" of buttons was what I had in mind, not just single buttons.

Grant Palin

11-04-2002, 03:12 AM

Originally posted by zoobie
I wouldn't use those....but that's just me. :D

You can make a lot nicer buttons with beveled edges, shadow, gradients, images, etc. if you take the time. :cool:

How's that? Images?

zoobie

11-04-2002, 05:00 AM

<input type="image" src="home.gif"> :D

eriyanto

06-11-2003, 08:01 AM

is there absolutely no way to make a flat combobox ? (<select>)
thanks...

Mr J

06-11-2003, 07:09 PM

Try the following

<style>
.default { BACKGROUND-COLOR: #cccccc}
.over{CURSOR: hand; BACKGROUND-COLOR: #eeeeee}
</style>

<table border=1 cellspacing="0" cellpadding="0" bordercolor="#0000ff"><tr align="center">

<td width="80" class="default" onMouseOver="this.className='over'" onMouseOut="this.className='default'">Text</td>

<td width="80" class="default" onMouseOver="this.className='over'" onMouseOut="this.className='default'">Text</td>

<td width="80" class="default" onMouseOver="this.className='over'" onMouseOut="this.className='default'">Text</td>

<td width="80" class="default" onMouseOver="this.className='over'" onMouseOut="this.className='default'">Text</td>

<td width="80" class="default" onMouseOver="this.className='over'" onMouseOut="this.className='default'">Text</td>

<td width="80" class="default" onMouseOver="this.className='over'" onMouseOut="this.className='default'">Text</td>

<td width="80" class="default" onMouseOver="this.className='over'" onMouseOut="this.className='default'">Text</td>

</tr></table>

brothercake

06-11-2003, 07:14 PM

Why not make it out of an unordered-list - no need for javascript or tag-soup - http://www.alistapart.com/stories/taminglists/

pardicity3

06-12-2003, 12:49 AM

Originally posted by brothercake
http://www.alistapart.com/stories/taminglists/
I don't even know how many times I have refered to that page. It is such a perfect solution to many problems!

brothercake

06-12-2003, 02:00 AM

isn't it - that's a seriously important webpage that one - as far as I'm aware it's the first article written on the idea, if not the originator of the idea itself, and look what a revolution in site-navigation design it's spawning ... awesome :)

I don't make navigation bars any other way now ..

ronaldb66

06-12-2003, 01:20 PM

I hear ya; I've been tinkering with multi-layered lists lately, too, to create a three-level nav menu, and once you've got your head around it there's no end to the possibilities. Love em, love em, love em.
Talking ALA: Zeldman finished his book (sounds like interesting stuff, by the way) and finally found the time to shovel some coal in the ALA furnace: it's running again!