Create a button effect using CSS

Forum Moderators: not2easy

Message Too Old, No Replies

Create a button effect using CSS

using hover etc.... help required

Daily Sparring

10:13 pm on Jul 31, 2004 (gmt 0)

I am driving myself nuts trying to figure out .css for buttons. I used to use images on all sites, but I am trying to get away from that and into css. I am have a hard time creating what looks like a button (both characteristics and looks) but is css. Does anyone have some quick code or know of some resources I can check out online. I cannot get the hover to work properly and I cannot get the desired effect as far as looks go. Thank you in advance.

j4mes

10:17 pm on Jul 31, 2004 (gmt 0)

By button, do you mean

<input type="button" name="foo" value="bar" />

Or do you mean the cool CSS styled links that change (background-) colour, style, etc. when you hover over them?

Daily Sparring

11:02 pm on Jul 31, 2004 (gmt 0)

Well, whichever is simpler. I am really struggling. I have viewed some of POR's stuff and the CSS file are so deep that I cannot get anything BUT the beveled buttons to work. I am really new to the entire CSS world, but I am trying to learn.

What I want is about 6 'buttons' horizontally across the page. I want them to almost be obvious 'buttons'. I want to be able to hover over the 'button' and have the hover activate and create either a depressed look or some form of over.

I had heard that CSS was easy to learn, but it has caused me nothing but problems to date.

I should correct something, no javscript. I want to use CSS only. Thanks.

j4mes

9:52 am on Aug 1, 2004 (gmt 0)

No Javascript eh?

That shouldn't be a problem. For form buttons, you could use something like this, with CSS hover to change it when you move your mouse over it:


<html>
<head>
<style type="text/css">
input:hover
{
color: #ffffff;
background-color: #ff0000;
}
</style>
</head>
<body>
<form method="get" action="http://www.google.com/">
<input type="submit" value="click me" />
</form>
</body>
</html>

There are literally hundreds more things you can do to buttons with CSS, though I've only included two here (to change the background and text colours). You'll need a different form for each button (I don't know of a simpler way without Javascript) just change the action to the desired page.

How's that?

isitreal

4:49 pm on Aug 1, 2004 (gmt 0)

I had heard that CSS was easy to learn, but it has caused me nothing but problems to date.

CSS is easier to approach if you treat it as something very difficult to learn, which it is.

I assume you are looking for navigation type links, either vertical or horizontal, like this?:

Link 1 : Link 2 : Link 3... etc

To get the affects you are after you probably want to use:

a.nav {
display:block;
background-color:blue;
text-decoration:none;
color:white;
padding:2px 5px;
width:4em;
float:left;
}
a.nav:hover {
background-color:white;
color:blue;
}

then you make your nav bar, say horizontal:

and so on. Doing horizontal links is not super easy with css, vertical navs are very easy, since you don't need any floats, and you can use default div behaviors for the nav container.

D_Blackwell

8:01 pm on Aug 1, 2004 (gmt 0)

CSS is easier to approach if you treat it as something very difficult to learn, which it is.

The great thing about CSS, is that you can learn and use pieces of it. Don't try to swallow it whole. CSS invites "ala carte" learning. Try this resource, and you may soon find the navigation "piece" of CSS to be fairly straight forward.
Listamatic [css.maxdesign.com.au] Don't just grab one. Work with it - understand it. Become enlightened - and empowered.

Try this to start:
<style>
#nav {
margin: 4em 0 0 2em;
}
#nav ul {
margin: 0; padding: 0;
}
#nav li {
display: inline; margin-right: 2em; text-align: center;
}
#nav li a {
background-color: red; color: #000; padding: 1em;
}
#nav li a:hover {
background-color: #000; color: red;
}
</style>
<div id="nav">
<ul>
<li>
<a href="">
Link
</a>
</li>
<li>
<a href="">
Link
</a>
</li>
<li>
<a href="">
Link
</a>
</li>
</ul>
</div>