willtudorevans Posted November 24, 2011 Report Share Posted November 24, 2011 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 Quote Link to comment Share on other sites More sharing options...
falkencreative Posted November 24, 2011 Report Share Posted November 24, 2011 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. Quote Link to comment Share on other sites More sharing options...
LSW Posted November 25, 2011 Report Share Posted November 25, 2011 Buy playing with the CSS, changing colors and borders you can make the buttons look animated. Quote Link to comment Share on other sites More sharing options...
willtudorevans Posted November 25, 2011 Author Report Share Posted November 25, 2011 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. Quote Link to comment Share on other sites More sharing options...
virtual Posted November 25, 2011 Report Share Posted November 25, 2011 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. Quote Link to comment Share on other sites More sharing options...
willtudorevans Posted November 25, 2011 Author Report Share Posted November 25, 2011 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. Quote Link to comment Share on other sites More sharing options...
willtudorevans Posted November 25, 2011 Author Report Share Posted November 25, 2011 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 Quote Link to comment Share on other sites More sharing options...
virtual Posted November 26, 2011 Report Share Posted November 26, 2011 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. Quote Link to comment Share on other sites More sharing options...
willtudorevans Posted November 26, 2011 Author Report Share Posted November 26, 2011 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! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.