Designing Buttons

[willtudorevans]

Hi Guys,

 

I am full subscriber to the KS library and I was wondering if there any tutorials on how to design buttons? I can't seem to locate any and would like to introduce them to my website.

 

Many thanks in advance,

 

Percy

[falkencreative]

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.

[LSW]

Buy playing with the CSS, changing colors and borders you can make the buttons look animated.

[willtudorevans]

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.

[virtual]

If you are using the code from Chris Coyier's site, in the a tag of your button add the width you need, then in the a span tag use text-align: center; to get the text to center within the button.

[willtudorevans]

If you are using the code from Chris Coyier's site, in the a tag of your button add the width you need, then in the a span tag use text-align: center; to get the text to center within the button.

 

Problem solved!

 

Thanks so much guys.

[willtudorevans]

Problem solved!

 

Thanks so much guys.

 

I'm back again!

 

I'm looking to manually change the colour of the buttons to suit my website.

 

I've downloaded the png files, and I've loaded them up in photoshop. I have a specific hex colour in mind, how do I make the orange buttons go #103959?

 

Thanks as always

[virtual]

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.

[willtudorevans]

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!