css for image button [Archive]

PDA

Click to See Complete Forum and Search --> : css for image button

cssuser

06-25-2007, 04:05 PM

Do anybody know how to use css for image button
instead of using image?

otuatail

06-25-2007, 04:37 PM

You use an image instead of a button. This is not realy a CSS issue. Why would this be a problem?

WebJoel

06-25-2007, 07:13 PM

The question should be '...use of CSS for image-less buttons' so you won't get quick retorts that are unhelpful. :o

Yes:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title></title>
<style type="text/css">
* {border:0; padding:0; margin:0;}/* Set everything to "zero" */

body {min-height:100%; height:101%;
font:x-small Arial, Verdana, sans-serif;
voice-family: "\"}\"";voice-family:inherit;
font-size:small;/*for IE 5.5 */
} html>body {font-size:small; height:auto;}/* Assist IE6 & <, 100% height */
font-size: small; voice-family: "\"}\"";
voice-family: inherit; font-size: medium;} /* Assist IE rendering height, keyword-font sizes, etc. */

p {font-size: 90%; line-height:1.3em; margin:12px 0 2px 0;}
h1, h2, h3, h4, h5, h6 {font-family: 'times new roman', arial, verdana, serif; background-color:none;
font-style:normal; font-variant:normal; font-weight:normal; margin:14px 0 4px 10px;}
h1{font-size: 1.93em;}
h2{font-size: 1.72em;}
h3{font-size: 1.52em;}
h4{font-size: 1.42em;}
h5{font-size: 1.32em;}
h6{font-size: 1.21em;}
</style>

<style type="text/css">
ul#navigation {width:77px; height:190px; padding:5px 5px 5px 7px; margin:25px; border:6px double black;}
ul#navigation li {list-style-type:none;margin:27px 0 27px 0; }
ul#navigation li a {text-align:center; color:black; display:inline; padding:5px 10px; text-decoration:none; background-color:#ececec;
border-bottom:6px solid silver; border-left:6px solid silver; border-top:6px solid #898989; border-right:6px solid #898989; }
ul#navigation li a:hover {color:red; letter-spacing:0.09em; padding: 5px 7px; position:relative; top:1px;right:1px; border-top:6px solid #acacac; border-right:6px solid #acacac; border-bottom:7px solid #636363; border-left:6px solid #636363; }
</style>

<link rel="shortcut icon" href="favicon.ico">
</head>
<body>

<ul id="navigation">
<li><a href="#">Link #1</a></li>
<li><a href="#">Link #2</a></li>
<li><a href="#">Link #3</a></li>
<li><a href="#">Link #4</a></li>
</ul>

</body>
</html> No images used here, yet it looks like an image roll-over effect.

cssuser

06-25-2007, 07:37 PM

thanks webjoel, i am new to css, thats why such mistakes:)

WebJoel

06-26-2007, 12:34 PM

Not a problem.

You'll note that the "hover" state the border-colors change/swap around, giving the appearance of 'something changed', but it is this part:...ul#navigation li a:hover {color:red; letter-spacing:0.09em; padding: 5px 7px; position:relative; top:1px; right:1px; border-top:6px solid #acacac; border-right:6px solid #acacac; border-bottom:7px solid #636363; border-left:6px solid #636363;... that tricks the eye into thinking it is a 'button'. By "hovering" over this, it 're-positions' itself 1-pixel down and 1-pixel to the left...

An even more effective 'non-image button' would be to move this from the a:hover (when you 'hover over' the button) to a a:active selector (the 'mouse-down' effect). That would really suggest a 'button' being depressed...
I suppose one could even add a sound-file to a:active to 'click' or 'squeek', and really make this a button effect... (not sure if this can be done w/out launching the default sound-player which would be waaaaay to cumbersome to deal with).