digg

Join DiggAbout

Discover the best of the web!
Learn more about Digg by taking the tour.

How to make sexy buttons with CSS

oscaralexander.com — This tutorial will teach you how to create pretty looking textual buttons (with alternate pressed state) using CSS. Dynamic buttons save you heaps of time otherwise spent creating graphics and will basically make you a happier person at the end of the day.

Bury
show profanity settings
expand all
  • seandfeeney, on 10/12/2007, -23/+77What is so sexy about a rounded edge box? when I hear sexy I better see sexy females as buttons.
    • Jeifurie, on 10/12/2007, -4/+252I'd click it.
    • ZeroMP, on 10/12/2007, -12/+40I definitely would NOT click it. Just look at those sharp edges. This is well below my standards.
    • Scheissenegger, on 10/12/2007, -22/+1sexy females as buttons: http://www.profit42.com
    • seventoes, on 10/12/2007, -8/+54Eww invalid html... you cant have a div inside of an anchor! div is a block level element! rawr!
    • HigherLogic, on 10/12/2007, -5/+16@seventoes: "Eww invalid html... you cant have a div inside of an anchor! div is a block level element! rawr!'

      It's not invalid HTML, it validates perfectly. It may not be semantically correct, but using div elements (or any block element for that matter) inside an anchor tag is perfectly fine. Besides, where is there a div inside the anchor tag? All I see is a span tag, an inline element.

      Oh, and as for your hypothetical div, you could also set the display to inline.

      Edit: Well, apparently when the article was first posted, the author used div elements. I can see why wouldn't use that, and just use a span instead, but the point still stands, you can use a div element inside of an anchor tag.
    • lavchan, on 10/12/2007, -0/+12@HigherLogic:
      In-line elements can not contain block elements in Strict HTML or XHTML (i don't know about Transitional). It's not allowed!

      The W3C says:
      'Generally, block-level elements may contain inline elements and other block-level elements. Generally, inline elements may contain only data and other inline elements. Inherent in this structural distinction is the idea that block elements create "larger" structures than inline elements.'
    • revenge7, on 10/12/2007, -17/+3I HAVE AN ERECTION.
    • WileEPeyote, on 10/12/2007, -7/+5I clicked em all.
      Several times.
      And I am not ashamed...
    • sbgskl, on 10/12/2007, -3/+1zeromp
      [M]
  • wfbnadador, on 10/12/2007, -39/+6gahd this is lame. burried as stupid.
  • wfbnadador, on 10/12/2007, -3/+93bury me as you must, block level elements (div) don't belong in inline elements(a). a span set as display block might make more sense
    • SamuelDr2, on 10/12/2007, -15/+1@wfbnadador (#6559488)
      Furthermore, to do sexy _buttons_, shouldn't they use the tag? It would correct come problem I have seen while test-driving his.
    • jav1231, on 10/12/2007, -3/+20Hell yeah! You tell 'em! .....wha!?
    • mattmcm, on 10/12/2007, -15/+4I'm confused. Wouldn't setting display:block to a span essentially make it the same as a div or other block-level element?

      EDIT: I thought about it, and now it makes sense. Bury me.
    • sulaco, on 10/12/2007, -7/+0He used a span. Try again.
    • dacheetah, on 10/12/2007, -0/+4@sulaco:
      "He used a span. Try again."
      Based on what was said in comment further up the page, the site originally used , but changed it to later.
  • Langford, on 10/12/2007, -1/+101How many people here tried to press the "Launch nukes" button? Be honest.
    • dotlizard, on 10/12/2007, -1/+83yes, but i did try the world peace button first.

      it didn't work.
    • ernasty10050, on 10/12/2007, -3/+16Yeah, after world peace didn't work...I had no other choice.
      I'm so sorry.
    • rye134, on 10/12/2007, -2/+19i hit it about 25 times but nothing happened...i think?
    • themoose, on 10/12/2007, -1/+16I tried the lanch nukes button before the world peace one. Am I evil?
  • EvilOtto, on 10/12/2007, -10/+47Is it just me or does anyone else get the uncontrollable urge to punch someone in the face when they use 'sexy' to describe inanimate objects?
    • wfbnadador, on 10/12/2007, -3/+9i think someone promoting their own blog article and their own methods as a route to 'sexy' buttons is irritating. be modest, that's all i ask. it's not 'sexy'

      The buttons are clean, the buttons are nice, they are by no means groundbreaking.
    • chicken101, on 10/12/2007, -0/+22A computer is the only one who loves me. ):
    • jav1231, on 10/12/2007, -15/+4You obviously haven't been to http://www.realdoll.com!
    • foomojive, on 10/12/2007, -12/+5*****! that link is NSFW!
    • othersomethings, on 10/12/2007, -1/+1I called my shovel upgrade in the Viva Pinata demo "Sexy" the other day. Do you want to punch me?
    • tungsai, on 10/12/2007, -0/+1EvilOtto: YOU ARE NOT ALONE.

      I too despise those that use the word "Sexy" to describe anything that doesn't ... arouse the nether regions. Or at least, make you do a double-take. I tried to quantify it:

      Sexy: People, Clothing, objects used for sex, or actions. Example: "She's sexy." "That's a sexy outfit." "She did a sexy dance."

      NOT SEXY: Ipods, computers, graphics, cars, CSS markups, etc.
  • frimple, on 10/12/2007, -10/+31. Re-hash the same technique that was new 3 years ago
    2. Post to Digg
    3. ??????
    4. Profit!
  • Dracos, on 10/12/2007, -2/+42a.button div {}

    An a tag cannot contain a div or any other block level tag. If he was doing "div.button a" or "a.button span" it would be legal.

    Buried inaccurate.
    • wfbnadador, on 10/12/2007, -2/+10agreed. use a span set it to display block.
    • dogshaft, on 10/12/2007, -3/+10Even better, the poster should have just linked to the already well documented sliding doors technique at A List Apart and spared us the blogspam.

      http://alistapart.com/articles/slidingdoors/
    • nathron, on 10/12/2007, -1/+0could you reply with a fixed version, or post a link with an alternate way of making sexy buttons in css? i want to implement buttons similar to these, but i would also like to use "proper" code.

      thanks.
    • dacheetah, on 10/12/2007, -0/+1Nathron, look again, the code HAS been fixed.
      Spans are now used instead of Divs.
  • cadkins69, on 10/12/2007, -5/+0must have taken it down. I get nothing but a blank page.
  • wiirdo, on 10/12/2007, -3/+15If you made the buttons look like boobies, that would be sexy.
  • Shady81, on 10/12/2007, -2/+39Placing a DIV inside an A is not allowed. Don't pimp broken code.. You're just adding ***** to the cesspool that already is the modern web. Buried as inaccurate.
    • dacheetah, on 10/12/2007, -0/+1Dugg up even though the problem has been fixed now.
      I'm glad the author has fixed the code, since I also dislike seeing code that violates standards. If everyone wrote good code, less people would use MSIE, or at least I like to believe that.
  • cyrus, on 10/12/2007, -0/+8As has been mentioned above...

    A is an inline tag.
    DIV is a block level tag.

    This is bad programming and should be avoided.
  • chickenpants, on 10/12/2007, -11/+3for those claiming this layout violates the spec, you should really, you know.. look at the code. while it is illegal to put a block element inside an inline element, that is NOT what is going on in this example. the key line would be where sets display:block; to a.button, thus putting a block element inside a block element which is totally legal.
    • FlorentG, on 10/12/2007, -0/+14Warning : HTML's block and inline elements are different than CSS' block and inline.

      In HTML, block and inline are defined in the DTD. They're just entities, which lists some elements (div and p are blocks, span and a are inline). HTML, at this point, has no knowledge of CSS. Turning the a into a block with CSS does not change its HTML definition, it's still an html inline, while being a CSS block...
    • chickenpants, on 10/12/2007, -0/+12i stand corrected. thanks for pointing that out.
  • hifiDesign, on 10/12/2007, -5/+4Pornblocked @ work due to the word "sexy" in the URL... Jesus H WTF?
    • violentvinyl, on 10/12/2007, -0/+14How did you make it into the comments? It says "sexy" in the URL here too.
  • derekknight, on 10/12/2007, -1/+3IE takes a great CSS button implementation and blows it, as usual.
  • quickorbit, on 10/12/2007, -5/+12NSFW?
  • crackmonkey, on 10/12/2007, -3/+2CSS is great unless the browser is IE6. Good thing that IE6 has no marketshare.

    this.blur()

    The cursor looks like a rat on acid in IE6
  • itswoody, on 10/12/2007, -0/+5Am I right in saying :active is a no go on IE 6? To be honest I don't know how a tutorial with this many holes in it can make the Digg front page...
    • daborg, on 10/12/2007, -0/+11Holes... Digg... Get it?
    • Persnickety, on 10/12/2007, -0/+2quirksmode.org says ':active' works in IE5 and IE6, but only for links.

      So, no hole.
  • Topher06, on 10/12/2007, -4/+2After playing around with XAML and WPF for the last few weeks, this article makes me laugh just for what they consider "sexy" UI.
  • flap, on 10/12/2007, -0/+12Not scaleable = not sexy
    • robuk24, on 10/12/2007, -0/+5Yeah, just increase the text size and watch it break. Wish I could get crap CSS tutorials to the front page!
  • NicePaul, on 10/12/2007, -0/+7Those buttons break when you increase the font size.
  • Aeyar, on 10/12/2007, -2/+1Fancy JS or not, I prefer a more reliable JS method to illegal html and rigid CSS...
  • mattlohkamp, on 10/12/2007, -0/+0Would a anchor-wrapped-span be more semantically correct? Some people are a little overeager about wrapping divs around everything...
  • oscaralexander, on 10/12/2007, -0/+11SORRY! I truly should've known better using a DIV (block) inside an A (inline)... I changed it to a SPAN now. Thanks!
  • motang, on 10/12/2007, -2/+1Sweet I was looking for buttons for my web based project, I can use this tutorial. Thanks for finding this.
  • hdtvdust, on 10/12/2007, -3/+0Honestly...do yourself a favor and HAVE SEX...whatever the nearest hooker charges. Once you do that, you will never describe internet buttons as sexy again.
  • trollick, on 10/12/2007, -3/+1Sexy??? Do you really want to have sex with these buttons?
  • polyGone, on 10/12/2007, -2/+1Uhh they didn't work in FF or IE for me...............
  • SwellGuy007, on 10/12/2007, -3/+1Sexy buttons???? You mean if I put these on my website other people will get turned on?

    Buried as Lame.
  • timwright12, on 10/12/2007, -3/+6Buried as inaccurate, this is "how to make sexy buttons with IMAGES"
  • frenchster, on 10/12/2007, -2/+1tiighht shiitt!
  • antitomato, on 10/12/2007, -1/+4Click button then drag off..... button stays pressed. Not sure if this happens in IE, and I'll leave it at that!
  • addicted68098, on 10/12/2007, -1/+3From a usability standpoint you really shouldn't do this because users may not recognize that it is a button.
  • jiludi, on 10/12/2007, -0/+2and here I was hoping for something jazzy, instead it looks like something from a Google page. A+ for effort though
  • yonifrenkel, on 10/12/2007, -5/+0Pretty sweet, I am now using this on http://www.thatnight.com
    • xxNIRVANAxx, on 10/12/2007, -2/+2Take it out. It looks like *****.
  • Zhay, on 10/12/2007, -1/+3Kekeke... me breaked it.

    (Hold in the left mouse button overtop of the css button, move the move off of the button, and let go!)

    Silly me.
  • sj200, on 10/12/2007, -1/+0Sexy? I think not.
  • jdiggity, on 10/12/2007, -2/+0I'm a total jerk but uhm, where can I get this GIF?

    a.button {
    background: transparent url('bg_button_a.gif') no-repeat scroll top right;

    tix
    • psiph, on 10/12/2007, -0/+1@jdiggity

      right above the "Styling the button" are the two images you need (one under "DIV" and the other one next to it under "A"). Right click on each one and save it.
  • psayre23, on 10/12/2007, -0/+2Doesn't seem to set back to normal when the button is dragged in FF2.
  • andyduncan, on 10/12/2007, -0/+2Requires javascript to submit the form, uses invalid markup, isn't very special, has been done before. Dugg down for lame.
  • IntellEJent, on 10/12/2007, -1/+2I found a bug in this (rendered in Gecko). If you click it, drag away from the button while still clicked, and release the mouse button, the button doesn't change into the nonclicked state again.
    • IntellEJent, on 10/12/2007, -0/+1This can only be reproduced if you click directly on the text. :-)
    • gameforge, on 10/12/2007, -0/+2It's technically a bug in the browser. Click any link that turns a different color when you hover over it or click on it, and drag it away - I'm using Firefox 2, and the "reply" links in Digg won't go back to their un-clicked color until I click elsewhere.

      It's just a lot more noticeable with these hoopty CSS buttons.
  • Scarfy, on 10/12/2007, -0/+1I guess it's just because I'm not very bright but did anyone else think the tutorial's explanation of how to create the graphics for the buttons was a bit lacking?
  • plasticmind, on 10/12/2007, -1/+1This is a terrible tutorial. The illustrations are sparse and mislabeled and the HTML is bloated.
  • EmmSee, on 10/12/2007, -1/+1Good for our SEO, too.
  • 1807, on 10/12/2007, -0/+1I guess you could say he's trying to bring....sexy.......back? lol
  • Jezper, on 10/12/2007, -0/+2So a big round button is considered a sexy one? I say it takes up too much space.
  • statc, on 10/12/2007, -0/+1How the hell did this get so many diggs?
  • ranishchirayil, on 10/12/2007, -1/+0i liked the javacsript used in this... amazing:)
  • weiran, on 10/12/2007, -0/+1No way to center these buttons...
  • DavidJBerman, on 10/12/2007, -0/+0Not everyone is a CSS expert. This article is great fun for people getting their toes wet in trying to learn how to make their pages look nicer. This content is appealing to a wide audience, it is easy to follow, well presented and easy to impliment. People complaining that they can make the button break by dragging it miss the point entirely. Besides, shouldn't these pro's know that you dont drag buttons?

    Thanks for this tutorial keep 'em coming for us n00bs.
  • oscaralexander, on 10/12/2007, -0/+0Ah, thank goodness. A positive comment :) Thanks!
  • Fetching more discussions...
    Show 51 - 53 of 53 discussions
  •  

    Login or register to add a comment

    Create a new account or login to join in the conversation on Digg. You'll also be able to Digg stories to help promote things you like.


© Digg Inc. 2008 — Content posted by Digg users is dedicated to the public domain.
DIGG, DIGG IT, DUGG, DIGG THIS, Digg graphics, logos, designs, page headers, button icons, scripts, and other service names are the trademarks of Digg Inc.