Comments on: Make your links and buttons feel like they are being clicked http://www.alan-horne.com/blog/css-active-link-tutorial/ Just another WordPress site Sat, 05 May 2012 12:37:37 +0000 hourly 1 http://wordpress.org/?v=3.3.2 By: Alan http://www.alan-horne.com/blog/css-active-link-tutorial/#comment-85 Alan Thu, 26 Aug 2010 12:10:11 +0000 http://www.alan-horne.com/blog/?p=158#comment-85 Thanks Mustafa, going to give that bit of script a little try later on today if I get the chance. Thanks Mustafa, going to give that bit of script a little try later on today if I get the chance.

]]> By: Mustafa Kurtuldu http://www.alan-horne.com/blog/css-active-link-tutorial/#comment-84 Mustafa Kurtuldu Thu, 26 Aug 2010 11:59:17 +0000 http://www.alan-horne.com/blog/?p=158#comment-84 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 <a href='somelink.html' rel="nofollow">Clicky</a> 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

]]> By: Alan http://www.alan-horne.com/blog/css-active-link-tutorial/#comment-76 Alan Wed, 25 Aug 2010 09:40:00 +0000 http://www.alan-horne.com/blog/?p=158#comment-76 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. 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.

]]> By: Ard http://www.alan-horne.com/blog/css-active-link-tutorial/#comment-75 Ard Wed, 25 Aug 2010 08:41:22 +0000 http://www.alan-horne.com/blog/?p=158#comment-75 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 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.

]]>