...

View Full Version : 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">
<!--
input.fancy {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
text-decoration: none;
background-color: #CCCCFF;
margin: 0px;
padding: 2px;
height: 25px;
width: 100px;
border: 1px solid #000000;
}
-->
</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">
<!--
.out {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
text-decoration: underline;
background-color: #CCCCCC;
border: 1px solid #000000;
text-align: center;
}
.over {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
text-decoration: underline;
background-color: #990000;
border: 1px solid #000000;
text-align: center;
}
-->
</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!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum