Welcome Guest, Not a member yet? Register   Sign In
Best css for buttons
#1

[eluser]bennyhill[/eluser]
Making a CMS app and instead of just having "Edit" and "Delete" text for each record I would rather have an icon. What is the best practice CSS for replacing the text with an image? I want to do it css instead of placing an <img /> tag in the markup.
#2

[eluser]GSV Sleeper Service[/eluser]
maybe something like
Code:
<a class="button edit" href="/edit">Edit</a>

.button {
text-indent:-9999px /* get rid of the text */
cursor:pointer;
width: [width of your image]
height: [height of your image]
}

.edit {
background: url(/path/to/edit_image.gif)
}
#3

[eluser]louis w[/eluser]
Personally I prefer a sliding doors technique so the button is flexible, rather then a fixed size. If you are going to have a fixed size image button doing it with css is no better then just placing the image on the page (if not more complex).

Check this page out, this similar to what I use for all my apps with the addition of making the on/off states into sprites instead of separate graphics to reduce flickering.
http://www.filamentgroup.com/lab/styling...ing_doors/
#4

[eluser]Michael;[/eluser]
Greets,

My personal pet peeve is cross browser differences ... Microsoft and the abomination Internet Explorer make life difficult enough for Web Designers.

So, to that end I was absolutely elated when I discovered this:

http://particletree.com/features/redisco...n-element/

I know you said you didn't want to use imgs ... but this is by far the absolute best thing I have found that produces perfect cross browser buttons, every time.




Theme © iAndrew 2016 - Forum software by © MyBB