css for image button

@cssuserJun 25.2007

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

to post a comment

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

@WebJoelJun 25.2007 — #The question should be '...use of CSS for image-[I]less[/I] buttons' so you won't get quick retorts that are unhelpful. :o

Yes:

[B]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">[/B]

<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">

[B]* {border:0; padding:0; margin:0;}[/B]/* 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>

[B]<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>[/B]

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

</head>

<body>

[B]<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>[/B]

</body>

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

@cssuserauthorJun 25.2007 — #thanks webjoel, i am new to css, thats why such mistakes?

@WebJoelJun 26.2007 — #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 [I][B]this[/B][/I] part:...ul#navigation li a:hover {color:red; letter-spacing:0.09em; padding: 5px 7px; [B]position:relative; top:1px; right:1px;[/B] border-top:6px solid #acacac; border-right:6px solid #acacac; border-bottom:7px solid #636363; border-left:6px solid #636363;... [/QUOTE] 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 [B]a:hover[/B] (when you 'hover over' the button) to a [B]a:active[/B] 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).

css for image button

4 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

css for image button

4 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

4 Comments(s) _↴

Also in #CSS _↴