I’m currently working on a new design for my personal blog that myself and my fiance Kerry use and wanted to use a technique I seen over at Design Informer, where when you click on a button/link it actually moves as if it is being pushed down.
The first thing I done was look at what attribute was actually being used, then work on re-creating the effect with my CSS.
Part 1 – Find the attribute
This was the easy part, links have a few attributes those being a:link, a:hover, a:visited and a:active, the latter being the one that we should use.
Part 2 – Figure out how to create the effect with CSS
I started by thinking this would be an easy process, simple add a margin of 1px to the top and hey presto it would drop down a pixel. Well I was wrong on that one, so the next step was to look at other CSS that might actually work with this.
My next step was to try using the CSS position attribute and after some tinkering around I managed to re-create the effect. I started at first by giving the holding DIV the position:relative and giving my a:active the position:absolute with it being 1px from the top, but that didn’t work for me. So I then tried position:relative on a:active and there it was, all working great.
So basically to get your buttons to look like they are actually being clicked you can use the code below.
If you had this simple layout :
<div id=”name”>
<a href=”somelink.html”>Clicky</a>
</div>
<a href=”somelink.html”>Clicky</a>
</div>
You would use this CSS to create the effect.
#name a:active {
position:relative;
top:1px;
}
I hope this little snippet will be useful to some of you out there, I just thought I would share my process on how I figured it all out.
Join the conversation - 4 Comments
I think a better way to do this is to just give a padding-top of 1px.
Also, when hovering a button you probably don’t want it too look like it’s being clicked, you only want to if it actually is being clicked. You have to use the a:active tag for that instead of a:hover.
I must admit the padding effect I never tried after margin never worked for me.
I have updated the code to show a:active, typo on my part.
Thanks for the feedback Ard.
Margins are a bit problematic, sometimes padding is the best way the achieve things that you would think margins would or could.
Also their are still issues with margins being different on the Microsoft browsers.
i got playing with your script and did this
ps i used classes cause for links they are better as classes are repeated items etc
– great site btw
css
.name a:active {
position:relative;
top:10px;
padding:10px;
font-family:Verdana, Geneva, sans-serif;
-moz-box-shadow: -1px -4px 1px #ccc;
-webkit-box-shadow: -1px -3px 3px #ccc;
box-shadow:-1px -3px 3px #ccc;
}
html
Clicky
Thanks Mustafa, going to give that bit of script a little try later on today if I get the chance.