Input buttons

[Lithium]

To all of you out there that work with webdesign, i got a small question..

Having this..

 

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: [url]http://www.dynamicdrive.com/style/[/url] */

a.boldbuttons{
background: transparent url('media/roundedge-gray-left.gif') no-repeat top left;
display: block;
float: left;
font: bold 13px Arial; /* Change 13px as desired */
line-height: 22px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 30px) */
height: 30px; /* Height of button background height */
padding-left: 8px; /* Width of left menu image */
text-decoration: none;

}

a:link.boldbuttons, a:visited.boldbuttons, a:hover.boldbuttons, a:active.boldbuttons{
color: white; /*button text color*/
}

a.boldbuttons span{
background: transparent url('media/roundedge-gray-right.gif') no-repeat top right;
display: block;
padding: 4px 10px 4px 2px; /*Set 10px to be equal or greater than'padding-left' value above*/
}

a:hover.boldbuttons{ /* Hover state CSS */
text-decoration: underline;
}


.buttonwrapper{ /* Container you can use to surround a CSS button to clear float */
overflow: hidden; /*See: [url]http://www.quirksmode.org/css/clearing.html[/url] */
width: 100%;
}

</style>

 

and this (example)...

 

<h4>Single button:</h4>

<div class="buttonwrapper">
[url="http://www.dynamicdrive.com/style/"]<span>Dynamic Drive CSS Library</span>[/url]
</div>


<h4>Side by Side:</h4>

<div class="buttonwrapper">
[url="http://www.dynamicdrive.com/style/csslibrary/category/C7/"]<span>Download Now</span>[/url] [url="http://www.dynamicdrive.com/style/csslibrary/category/C7/"]<span>CSS buttons</span>[/url]
</div>

 

original article can be seen at http://www.dynamicdrive.com/style/csslibrary/item/bold_css_buttons/

 

How can i use the first code bits in order to make it as a replacement to <input type="button"> tags?

[Floydian]

Re: Input buttons

There's two things to overcome there, that I can see.

The :hover pseudo attribute isn't recognized by IE 7/6 except for a very small set of elements. (mainly the A elements)

So you're input button is going to lose that hovered state, unless you apply some javascript.

The second problem would affect all browsers. The css code there relies on there being three elements. A parent, child and grandchild. So, you couldn't just put an input element inside a div and call it a day. You'd need to put it inside two divs, or a div and a span. Or some other combination of elements.

Then you'd need to change the references to a and span in the css to suit the new elements. You'll likely have to make other changes as well, since input elements have different margins/padding/and whatnot you'll have to contend with.

[redsnake420]

Re: Input buttons

im really crappy with java script i was also wondering about this same thing

[redsnake420]

Re: Input buttons

this is the one im trying to use

http://www.dynamicdrive.com/style/cssli ... e_buttons/

[Lithium]

Re: Input buttons

that javascript tip is a decent option, though i'm just wondering how much trouble will i get to make it working properly! hehe thx Floydian :)

[Floydian]

Re: Input buttons

IMHO, and I know there's *purists* out there that disagree (it's cool), using a javascript library makes adding cross browser compatible even listeners is pretty elementary.

But it depends on how comfortable you are with javascript and the library if you choose to use one.