Jump to content
Killersites Forums

Designing Buttons


willtudorevans
 Share

Recommended Posts

I don't think we have a video on this, actually. This is roughly the code I usually work with: http://css-tricks.com/snippets/css/perfect-css-sprite-sliding-doors-button/

 

Basically, you have an <a> element with a background image and display:block set. On hover, you use CSS to move the position of the background image to add the hover effect.

Link to comment
Share on other sites

I don't think we have a video on this, actually. This is roughly the code I usually work with: http://css-tricks.com/snippets/css/perfect-css-sprite-sliding-doors-button/

 

Basically, you have an <a> element with a background image and display:block set. On hover, you use CSS to move the position of the background image to add the hover effect.

 

Thanks for this Ben. That hover effect is quite clever!

 

I'm putting these buttons in my left hand navigation div column which currently has a width of 188px. I can't get these buttons to fill the width of the column without adding text to bulk them out. I thought the 'clear' option might resolve this but it doesn't seem to. Any suggestions?

 

Currently my buttons are stacking alongside each other when there is room to fit two in one line. Something tells me the 'inline' feature comes in to play here to. Probably way off though!

 

Many thanks in advance.

Link to comment
Share on other sites

You will probably have to separate the buttons into 2 different files and then recombine them, as the method I am giving you will affect the whole image. If you overlay orange you might get the top button to the shade you want, but the bottom button if it's a darker color might not give you want you want. If you split the images into 2 different ones you can overlay color and adjust the Blend mode individually.

 

Open the image

Go to Layer - Layer Style (or fx at the bottom of the layers palette)

Open Color Overlay

Choose your color

Change the blend mode to Screen

Adjust the Opacity to show the gradient.

Link to comment
Share on other sites

You will probably have to separate the buttons into 2 different files and then recombine them, as the method I am giving you will affect the whole image. If you overlay orange you might get the top button to the shade you want, but the bottom button if it's a darker color might not give you want you want. If you split the images into 2 different ones you can overlay color and adjust the Blend mode individually.

 

Open the image

Go to Layer - Layer Style (or fx at the bottom of the layers palette)

Open Color Overlay

Choose your color

Change the blend mode to Screen

Adjust the Opacity to show the gradient.

 

Thanks Virtual!

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...