Skip navigation
Currently Being Moderated

Glow border around a button

Apr 23, 2012 6:08 AM

How would I set a css border glow property for buttons like the year buttons here?

http://kiefferfurniture.com/literature/archive/years/2010/2010archive. htm

 
Replies
  • Currently Being Moderated
    Apr 23, 2012 6:15 AM   in reply to kcfi

    They used a swap image behavior

    yearbuttons_r1_c1.gif

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 23, 2012 6:21 AM   in reply to kcfi

    Hi kcfi,

     

    The example page you're looking at uses javascript to swap the images on rollover.

    There is a way to do the same thing with just CSS.

     

    Either way though, you're going to need a graphic for the "normal" state and one for the "rollover" state.

    The CSS method allows the designer to provide both states in one graphic.

     

    Here's a link to a good tutorial for the CSS method.

     

    ~codeDawg

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 23, 2012 6:26 AM   in reply to kcfi

    It's right there in my post - last sentence, the word "link".

    Here it is again:

    http://kyleschaeffer.com/best-practices/pure-css-image-hover/

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 23, 2012 6:37 AM   in reply to kcfi

    Yup - there is a way to do it without images.

    It's only available in CSS3 though and won't work reliably with all the browsers (right now).

     

    Just do a Google search for CSS3 and the box-shadow property.

     

    ~codeDawg

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 23, 2012 7:15 AM   in reply to kcfi

    I hear 'ya.  Your custom furniture site goes back a few years. 

     

    (One thing I like about my line of work is that I get to meet artisans of many different crafts.)

     

    If creating images for buttons with the text (year) embedded is what is really bugging you, there may be another approach.

    Create two "blank" buttons - one for "glow" and one for "normal".

    Use the buttons as backgrounds for your archive year links (anchor points) - as outlined in the tutorial link I gave you.

    This way you only have 2 (reusable) images, you are using pure CSS, you avoid the CSS3 headaches and you can add more years to your archives menu without creating any more images.

     

    ~codeDawg

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points