Jump to content
Killersites Community
willtudorevans

Designing Buttons

Recommended Posts

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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 :)

Share this post


Link to post
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.

Share this post


Link to post
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!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×