Recommendations on adding sprites to html buttons

Hi, I've already adapted a couple of my image-based buttons (easy) but now want to adapt my html-based buttons to have a background image and rounded corners.

I know the background image would be easy, but is there something in the Spry library that can be used to style buttons?

Here are some examples below (although I'd probably shy away from the CSS3 for now).

22-css-button-styling-tutorials-and-techniques/

Thanks!

--Lucija

I'm not really sure if there is a Spry Library that does this effect. But You probably get the same effect by using <div> and adding onclick to make it behave like a button.

Thanks Dani,

Can you please tell me which files, aside from the .css, I would add the new <div> to for html buttons? It wasn't too obvious to me even though I did searches for the button class names.

Also, do you think the new theme changer would be more helpful?

The buttons and submit buttons in Powerstore uses a global classes that are defined int he common.css file. If you open the common.css file look for these two classes:

input[type=submit] and input[type=button]. These two classes control most of the buttons in PowerStore. You can then add background images to customize those buttons.

Once you make this modification, i think Theme-it will be a great tool that will help you customize the color of the buttons and the background images of the buttons. But currently you Theme-it will only help you in changing the colors.

Hi

I would suggest the easiest way to do this is using CSS. a:link, a:vist,a:hover, a:active. pseudo classes. They are reasonably simple to use and there are loads of tutorials on the web.

If you really dread creating your own buttons and working out the HTML I highly recommend project seven stuff. The support is as good as here and their menu systems are search engine friendly.

index.htm

take a look

HTH

Ian

Nice link to Project 7!

I found this solution and just need to know which PHP docs will get the new divs to place around the input CSS. css-sliding-door-using-only-1-image/

BTW: I was able to add this CSS3 code to achieve rounded corners and so far, with the exception of IE7, adding the code below to the input CSS seems to work just fine.

input[type=submit] {
background-color:#25408E;
border:0;
color:#FFFFFF;
font-family:"Arial, Helvetica, sans-serif;
text-align:center;
width:140px;
height:33px;
font-size:12px;
font-weight:bold;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

Those tutorials do have nice options for buttons. Thanks for the link.

Hi Ray, I was thrilled to see that the CSS3 corners worked for most browsers and ended up adding a background to the CSS. It eliminated the need for JS or sliding doors entirely.