CSS Buttons Question

Discussion in 'Web Design and Development' started by MattSepeta, May 2, 2011.

  1. MattSepeta macrumors 65816

    MattSepeta

    Joined:
    Jul 9, 2009
    Location:
    375th St. Y
    #1
    I am more of a design guy at heart but have been helping my company do some web over-hauling of our sites. We have been using simply Photoshop-made buttons for our links.

    Question: Can someone check out this site. I am wondering if the buttons on the top leading off the page are made strictly using CSS/HTML, or if there is a photoshop template behind it.

    From what I can gather on a few other CSS Button tutorials there may be a blank photoshop template behind it and the CSS can stretch it and add the text? Am I way off base?

    Thanks for helping me handle my code ignorance :(

    EDIT: Forgot about the mouseover glow... Is this done strictly through CSS or do you need an "after" state image?
     
  2. UTclassof89 macrumors 6502

    UTclassof89

    Joined:
    Jun 10, 2008
    #2
    Those can be done with pure CSS.

    Check out cssportal.com. The have a neat online generator for cross-browser rounded corners as well as gradients.
     
  3. bpaluzzi macrumors 6502a

    bpaluzzi

    Joined:
    Sep 2, 2010
    Location:
    London
    #3
    Those are done with a background image:
    http://komotion.com/wp-content/themes/komotion/styles/blue/button_sprite.png

    The mouseover effect is using javascript to change the opacity of the image -- it makes it slightly more transparent (80% transparent), which gives the "lightening" effect. Nice little effect!
     
  4. manueld macrumors 6502

    Joined:
    Jun 8, 2009
    #4
    Just keep in mind as well that the transparency trick doesn't work in IE so make sure you have a fall back in those instances.
     
  5. bpaluzzi macrumors 6502a

    bpaluzzi

    Joined:
    Sep 2, 2010
    Location:
    London
    #5
    Good point! I'd recommend using jQuery for a project like this. The jQuery transparency functions work across all browsers.
     

Share This Page