homepage Welcome to WebmasterWorld Guest from 54.167.185.110
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Create a button effect using CSS
using hover etc.... help required
Daily Sparring




msg:1207566
 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




msg:1207567
 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




msg:1207568
 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




msg:1207569
 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




msg:1207570
 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:

<a class="nav" href="/page1.htm">Link 1</a>
<a class="nav" href="/page2.htm">Link 2</a>
<a class="nav" href="/page3.htm">Link 3</a>

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




msg:1207571
 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>

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved