Is it possible to mimic sliding doors technique in CSS to have buttons without images

views:

answers:

Is it possible to mimic sliding doors technique in CSS to have buttons without images

We use the sliding doors technique in CSS with sliced background images as mentioned here to create buttons which are oval shaped and have the color change and press down effect.

Would it be possible to do something simmilar just with CSS but without using any background images.

+4 A:

You can in browsers that support CSS3 property border-radius (specs)

Examples at http://www.css3.info/preview/rounded-border/

In css you should use

a{..} to style the default style
a:hover{..} to style the over effect
a:active{..} to style the pressed effect

Gaby 2010-07-15 11:07:20

How about the press down effect, will it be possible to achieve without images

Samuel 2010-07-15 11:20:01

@Samual, not sure what the press down effect is.. there is no third state in the example link you gave..

Gaby 2010-07-15 11:46:17

@Samual the press down effect would be set in the a:active rule by shifting the link's position down and to the right. You could do this with position:relative, top: 1px, left: 1px.

Pat 2010-07-15 12:23:03

Hi all

CSS3 property border-radius (specs) its ok.

but it was not working in IE and other browsers so please don't use this preporty and use background-color:#000; .. but round-cornner not possible.

Thaks Ptiwari

Prashant 2010-07-15 12:36:48

can you let me know, the browser versions you had it successfully running and the ones which didn't

Samuel 2010-07-16 03:37:04

ansaurus

tags:

views:

answers:

Is it possible to mimic sliding doors technique in CSS to have buttons without images

related questions