Home » DHTML » Article
Creating CSS Buttons
|
| Article by: |  tgreer ( 204 ) (12/7/2004) |
|
| Sponsored by: | FindMyHosting - Web Hosting Search |
| Summary: | With Cascading Style Sheets, you can turn ordinary hyperlinks into fully functional "buttons", without using JavaScript. |
|
| Viewed: 16596 times |
Rating (46 votes): |
|
4.6 out of 5 |
|
|
|
Creating CSS Buttons
Working Demo:
Button 1Button 2Button 3
The Cascading Style Sheet (CSS) definition provides several so-called "pseudo-classes". These are classes that modify all occurences of a given style definition.
They take the form:
Anchor tags have four pseudo-classes:
1) link
2) visited
3) hover
4) active
The only one that perhaps needs further explanation is "active". It refers to a link in the process of being clicked. The mouse is "down", but hasn't yet been released.
By setting the background, spacing, and border properties of these pseudo-classes, you can make your hyperlinks look and behave like buttons.
The code is below:
Note: I defined a:link and a:visisted to share a style definition, because buttons don't change their appearance when they've been "visisted".
|
|
View highlighted Comments
 User Comments on 'Creating CSS Buttons'
|
|
Posted by :
tgreer at 17:20 on Friday, December 17, 2004
|
Wow, 389 views and not a single comment or rating. Oh well.
It's been brought to my attention that some have tried this and have a problem. I didn't mention it, so need to clarify. You must specify the pseudo-classes IN ORDER: link, visited, hover, active.
| |
|
Posted by :
tgreer at 12:21 on Tuesday, December 28, 2004
|
Thanks for the rating votes. What would have made this a "perfect" article?
| |
Posted by :
 RonG. at 00:16 on Wednesday, January 26, 2005
|
Very cool, I used it on a small app for work.
thanks.
-Ron
<Added>
btw, the article was fine, simple and effective, I had zero
problems implementing it.
| |
|
To post comments you need to become a member. If you are already a member, please log in .
 
| RELATED ARTICLES |
Creating CSS Buttons
by Thomas D. Greer
With Cascading Style Sheets, you can turn ordinary hyperlinks into fully functional "buttons", without using JavaScript. |
 |
DHTML Horizontal Scroller
by Premshree Pillai
Scroll text horizontally when the user hovers over a link. |
|
DHTML Javascript Ticker
by Premshree Pillai
This is a JavaScript Ticker which ticks a number of messages like the one shown above. It also has a useful 'Show All' feature. |
|
Manipulate Scrollbar Colors Using CSS and JavaScript
by Mike Thompson
The thing about the default color of scrollbars is that it's dull and ugly -- usually this color is gray. Wouldn't it be nice to change this color to better fit the overall theme of your site? Luckily, Cascading Style Sheets and JavaScript can be used to do just that!
|
|
Simple Thumbnail Browsing Solution
by Troy Wolf
This simple script allows the user to select from several thumbnail images and view the larger image, using a mixture of DHTML and Cascading style sheets. |
|
DHTML News Bar
by Premshree Pillai
This is the News Bar script which displays a number of messages and rotates them using DHTML. |
|
DHTML Scrolling Image
by Premshree Pillai
Using this script the user can scroll an image left or right by clicking a buttong
|
|
DHTML Zoom In and Out Script
by Premshree Pillai
Using zoOom, you can zoom in and zoom out any image that is specified in the code.
|
|
Simple Mouse Trail using VB Script
by Jeff Anderson
With IE gaining in prominence every day, it's becoming acceptable to use VBScript in web pages. That makes some activities like the mouse trail a real cinch. |
|
Mouse Trail with Text
by Jeff Anderson
A Classic Mouse Trail Script, with configurable text, rather than images. We chose `I love you` for our text - what will you chose? |
|
| |
