close ad
WARNING: Do Not Install the DREAMWEAVER CC 2017 Update »
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

Recommendations on adding sprites to html buttons

Thread began 2/20/2010 2:40 pm by lucyland | Last modified 3/08/2010 2:52 pm by lucyland | 1597 views | 8 replies |

lucyland

Help: Can I add 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

Sign in to reply to this post

Dani Chankhour

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.

Sign in to reply to this post

lucyland

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?

Sign in to reply to this post

Dani Chankhour

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.

Sign in to reply to this post

i.edwards384429

buttons

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

Sign in to reply to this post

lucyland

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/

Sign in to reply to this post

lucyland

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;
}

Sign in to reply to this post

Ray BorduinWebAssist

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

Sign in to reply to this post

lucyland

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.

Sign in to reply to this post

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...