CSS Button 3D on Hover.

Submitted on: 06 Apr 09

Category: Tutorials

Rate this Tutorial:

1 Star2 Stars3 Stars4 Stars5 Stars
Loading ... Loading ...

Tutorial:

A very Simple 3d Button effect using CSS.  You can play and change different properties of this button my using different CSS tags. checkout the code below and the demo. If you require further help, please post in the thread.

a.test, a.test:visited
{
display:block;
color:#000;
border:1px solid;
border-color:#aaa #000 #000 #aaa;
text-decoration:none;
width:8em;
text-align:center;
height:2em;
line-height:2em;
background:#fc0;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
font-weight:bold;
}

a.test:hover
{
color:#000;
background:#ffd633;
position:relative;
top:1px;
left:1px;
border-color:#000 #aaa #aaa #000
}


Demo

50 Total TweetBacks: (Tweet this post)
  • en: @WSJ I'd say it means upholding the law regardless of race or gender. 07/14/09 04:53pm
  • en: @wallymayz yea i man lol u make sure if ur bitch get weave & it aint remy hair or anythin of that nature tell her 2 shoot herself dead ass 07/14/09 04:53pm
  • en: @AndLynC was it you or your GTP vs. the cement truck? I must say that car is intimidating. 07/14/09 04:53pm
  • en: @VOIDMunashii zombies. or maybe the mole people did it 07/14/09 04:53pm
  • en: it's either i'm suppose to be a.) a little angy, b.) above average angry, c.) angry angry, or d.) i should just hit you and stop talking 07/14/09 04:53pm
  • en: @extrafancy1 Suprise Purse roach is also a very good name. Perhaps we could call it "are these my bus tickets, or rolling papers?" 07/14/09 04:53pm
  • en: @youngsinick word! every role that Beyonce got had something to do with singing or it wasn't too much of a stretch from who she is.... 07/14/09 04:53pm
  • en: @DREAMTEAMJIGGA but if there is any BAD LadYz that wanna fuck wit BIG DONs party tonite hit ME or @dreamteamjigga wit pic of U and 2 friends 07/14/09 04:53pm
  • en: @EmmaHayden :) Dont worry I wont make you feel bad about it anymore...or at least I'll try not to ;) 07/14/09 04:52pm
  • en: why can't it be 2:30 yet? or better yet 3:30 07/14/09 04:52pm
  • en: RT @JohnLusher: Hello, nice to meet you! Don't send me to your site, auto DM me or try to sell me...let's just start a conversation! 07/14/09 04:52pm
  • en: @ddlovato I WISH YOU AND TRACE THE BEST IF ITS AS FRIENDS OR ANYTHING ELSE IT DOESNT MATTER WHAT THE WORLD SAYS ONLY WHAT THE HEARTS WANTS 07/14/09 04:52pm
  • en: @JDSnoise Helen isn't that silly a name, and she's only gone for a week or two. 07/14/09 04:52pm
  • en: No need for Doctors, Scripts or Prescriptions!..log on to eACCESSDIRECT.COM and take your Health into your own hands! 07/14/09 04:52pm
  • en: When you write—without a computer—do you prefer a pen or pencil? I'm a pencil person myself. 07/14/09 04:52pm
  • en: Working or trying to work 07/14/09 04:52pm
  • en: Ok, back in the saddle. Lose - suffer deprivation of...Loose -- free or lax. Please don't ever say you are "loosing" something. 07/14/09 04:52pm
  • en: what's going on today? I'm not getting any fun tweets... :-( is everyone still sleeping or something? Damn 07/14/09 04:52pm
  • en: Tryna keep up the positive attitude by jumping around!LOL. "Was on the floor but no one's gonna bring me down" or smth like that @erlynaaa;) 07/14/09 04:52pm
  • en: Sure @eCelebrating. @tenakim, which L line do you need? OR, where do you need to ultimately be? 07/14/09 04:52pm
  • en: @starryeyedhaze mine's a good topic, with or wihtout presentation, come listen :) 07/14/09 04:52pm
  • en: Do you guys know any good recipies or dishes? 07/14/09 04:52pm
  • en: @KoFiBaBy yes u already know my beef with you! So get it done or ima hurt you! 07/14/09 04:52pm
  • en: What are we going to do now that many health and human services have been cut or are underfunded? #Ohio #Budget 07/14/09 04:52pm
  • en: @iamcurves school band or boosters as called by many.... plays during the ball games... hahah 07/14/09 04:52pm
  • en: It's a rare moment in history when two albums come out that I truly enjoy. If you haven't picked up Wilco or Derek Webbs latest please do! 07/14/09 04:52pm
  • en: RT @kidinspiration: lookin forward 2 big news abt #kidmin hoping for the location of the ark or the exact date of the rapture.// Ha! 07/14/09 04:52pm
  • en: @ladystarcamp http://twitpic.com/ab4eq - #sammie it's sammie baby ladystarcamp is the movement get wit it or get lost BUUURRRRRR 07/14/09 04:52pm
  • en: Bringin back de 32 inch Phillips for de second time, think it's Sony or sanding time 07/14/09 04:52pm
  • en: RT @harrislacewell RT @jelani9 wants media to recognize "Latina woman" is redundant... kind of like "black African American" or &q 07/14/09 04:52pm
  • en: @helenauon Sounds like you're learning lots, or thinking about lots as a result of umbrella, I look forward to hearing more tomorrow! 07/14/09 04:52pm
  • en: @Tomasincge You can "hide" those requests if you don't want to see them any more or block etc. That's what I do. 07/14/09 04:52pm
  • en: Russia wants us to reduce our defense or they will not help us with Iran. Who needs them! Do not fall this obvious ploy. B 4 STRONG DEFENSE! 07/14/09 04:52pm
  • en: @Vanillababehice okaaay(: are you eastern time or are you central? 07/14/09 04:52pm
  • en: or here: http://www.flickr.com/photos/jimmyd2008/ - I've had enough, I'm off. 07/14/09 04:52pm
  • en: @ruoxuan I'm thinking of Bali or Bangkok/Phuket but the weather during year end is always rainy..not very ideal hm? 07/14/09 04:52pm
  • en: @ZimmiRic Regensburg! Waiting for a flight ticket or at least a date when I have to go.... 07/14/09 04:52pm
  • en: "Always know that the person who said opportunity knocks but once was either lazy or stupid." -Ira Berkow's father 07/14/09 04:52pm
  • en: #Truefriendship is making sure your girl looks as good as you do before going out..no matter how long it takes or how much needs to be done 07/14/09 04:52pm
  • en: @boskabout I ain't scarred or so, but all the crap certain companies send their employees, I mean take a dafalgan and get on with it :D 07/14/09 04:52pm
  • en: Poll-A-Dude: diamond rings are a) signs of love b) social must-do or c) solution for relationship woes. Dudes, we want to hear from you! 07/14/09 04:52pm
  • en: @catlover8400 OMG the blogs were so amazing! I miss them :-( He should do a blog on a regular basis! Or he should just go on Twitter =P 07/14/09 04:52pm
  • en: Dana White is everything a Don King, David Stern or Gary Bettman could never be. A real person. (via @winter717) so very true. 07/14/09 04:52pm
  • en: doesnt matter if im dying or not, still gotta strike those poses =) off to work... =/ 07/14/09 04:52pm
  • en: Boy do I feel good! I think I can conquer the world 2day- or at least make ppl aware I exist!!! Woo Hoo 07/14/09 04:52pm
  • en: Any idea's for the next installment of famous quote series??... or maybe a collaboration with someone :D hmmm 07/14/09 04:52pm
  • en: @soulfulll What did he do? To deserve that? I wonder if they're still together...I hope not...or maybe they deserve each other 07/14/09 04:52pm
  • en: i want a new figurine or costume to add to my collection 8D ~random~ 07/14/09 04:52pm
  • en: RT Did u try the patch or the gum yet? @kelchmonster Is more than addicted to cigarettes. 07/14/09 04:52pm
  • en: @THEREALHAWKMAN Are you up this early or are you still up from yesterday?? lol 07/14/09 04:52pm

[Post to Twitter] Tweet This Post 

Got something constructive to say?