Mike Lane
Mar-28-2006, 05:32 PM
So Andy asked here (http://www.dgrin.com/showthread.php?t=30813) if I could enlighten people on if and how you can create custom buttons. You can't.
Just kidding. Let's say you don't really care too much about creating images. You're just looking to get by with a nicer looking albeit not too fancy. The first thing you have to do is to target your buttons. Fortunately JT has made this easy by calling classing them either with buttons or smbuttons. Basically the difference is that the .buttons are ones that you'll see when you're logged in and they have a larger font and the .smbuttons are ones that will show up for various user interface items on your site - e.g. when you add a comment and you select add comment or cancel those are .smbuttons.
So to change them up a bit you can do what I've done on mikelane2.smugmug.com (http://mikelane2.smugmug.com) (as of today - this may change):
.buttons,
.smbuttons { /* select the normal state buttons */
background:#7d7d7d; /* set the background color */
color:#e7e6e6; /* set the text color */
border:3px outset #7d7d7d /* make it look slightly 3d using only CSS */
}
.buttons:hover,
.smbuttons:hover { /* select the hover state of the buttons */
background:#9e9d9d; /* make the background color a bit lighter */
color:#222; /* change the text to be a bit more readable on the lighter bg */
border-color:#ad9d9d; /* change the border color but not the border style */
}
.buttons:active,
.smbuttons:active { /* select the button state when the mouse is clicked */
background:#9e9d9d; /* set the background color */
color:#222; /* set the text color */
border:inset #ad9d9d; /* change the border to an inset border so it looks as if the button has been pressed */
}
You'll notice that I have chosen to make both sets of buttons look the same. You can do that too or you can make them look entirely different. With a little more specificity you can make them different on each different page of your site. But here, I made them all the same site-wide.
"Awesome! Uh, but wait it doesn't work in my browser. :dunno "
Well that's because you're using the world's worst browser, Microsoft IE6. MSIE doesn't recognize the :hover and :active states on anything but <a> elements. However, you'll notice that the buttons look just fine even though they don't change in IE. This is called degrading gracefully.
But let's say you want to do something like I've got on my site (http://photos.mikelanestudios.com/date/) - notice the "browse" button? :wink (IE isn't hacked as of yet so it'll look bad there, but that will change eventually...) The steps are eeerily similar to the ones above except you have to do a bit of work first. You need to create yourself a button. But you don't want it to be any ordinary button. No, no. You want it to be 2 buttons in one. Why? Well so you can do CSS sprites of course!
Now, I can't very well justify just giving away my buttons now can I? So what I did was to create you a set of your own. These are super easy even if you're a Photoshop clown. All you have to do is use the rounded rectangle tool and set a layer style and save it as a png. That's exactly what I did and it takes all of 2 minutes.
http://mikelane.smugmug.com/photos/61997394-O.png
See? 2 buttons in one. You could even do 3 if you're feeling feisty! We'll make it so only one of the colors will show at any given time by using the :hover and :active pseudo classes and a little background positioning. So let's assume again that you want all of your buttons to look the same. Once you get that image (or your own image) saved to your site (please don't steal my bandwidth!) simply copy the URL down and then use a code like this:
EDIT: You know what I love? IE. Love it. I should have realized that IE would try to squash the two pills above into one compact little area thus leaving Andy broken and sobbing. Well buck up Andrew! All we'll need is a quick fix. First thing you need to do is to create an entirely new button just for IE. This time with only one pill. If you're a photoshop jester like me you can simply go into the psd, copy one of the pill layers into a new document, crop, save and post like so:
http://mikelane.smugmug.com/photos/62023846-O.png
Now upload that button to your smugmug site, note the URL, and use it in the magenta code below. My God I hate IE.
EDIT 2: I still hate IE... The default value for the background property is transparent if you leave it out like I did. Guess who doesn't know that? The IE developers. Yay! So add the yellow now. I think I'm going to run out of colors soon at this rate.
EDIT 3: Well I'm a complete moron... Duh, if the background is defined with a png and not overridden in IE of course it's not going to be fixed. So ignore edit 2 and revel in the edit 3 sea green goodness.
.buttons,
.smbuttons { /* select all the normal state buttons */
background:url(/photos/XXXXXXXX-O.png) top no-repeat; /* set the background to your uploaded image file and make sure the top is at the top and it doesn't repeat; */
_background:transparent;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true, sizingMethod=scale, src='/photos/YYYYYYYY-O.png'); /* make IE able to handle the png transparency */
border:0; /* we don't want a border for this example */
height:20px; /* Set the button height to be the same as the height of one of your buttons */
width:85px; /* Set the button width to be the same as the width of your buttons */
color:#000; /* set a text color that is readable on that button */
}
.buttons:hover,
.smbuttons:hover { /* select the hover state for the buttons */
background-position:bottom; /* Our hover state is on the bottom so make it so the bottom of the background image is at the bottom of the container */
border:0; /* still no border on the hover */
height:20px; /* make double sure the dimensions don't change */
width:85px;
color:#000; /* set a text color that is readable on that button */
}
.buttons:active,
.smbuttons:active { /* very optional */
position:relative; /* needed for the next set of rules */
top:1px; /* these 2 make the button move down and right one pixel as if it were being pushed downward */
left:1px;
}
The other thing you're going to have to do is to hack IE to make it so the buttons work. That is the code that I highlighted in purple above. Just slip the same number replacement for XXXXXXXX in there as you did for the background image url right above it.
And there you have it. Fancy pants buttons. Don't be afraid to stray away from the mac-ish conformity of the plasticy-glassy gell-like button either!
Just kidding. Let's say you don't really care too much about creating images. You're just looking to get by with a nicer looking albeit not too fancy. The first thing you have to do is to target your buttons. Fortunately JT has made this easy by calling classing them either with buttons or smbuttons. Basically the difference is that the .buttons are ones that you'll see when you're logged in and they have a larger font and the .smbuttons are ones that will show up for various user interface items on your site - e.g. when you add a comment and you select add comment or cancel those are .smbuttons.
So to change them up a bit you can do what I've done on mikelane2.smugmug.com (http://mikelane2.smugmug.com) (as of today - this may change):
.buttons,
.smbuttons { /* select the normal state buttons */
background:#7d7d7d; /* set the background color */
color:#e7e6e6; /* set the text color */
border:3px outset #7d7d7d /* make it look slightly 3d using only CSS */
}
.buttons:hover,
.smbuttons:hover { /* select the hover state of the buttons */
background:#9e9d9d; /* make the background color a bit lighter */
color:#222; /* change the text to be a bit more readable on the lighter bg */
border-color:#ad9d9d; /* change the border color but not the border style */
}
.buttons:active,
.smbuttons:active { /* select the button state when the mouse is clicked */
background:#9e9d9d; /* set the background color */
color:#222; /* set the text color */
border:inset #ad9d9d; /* change the border to an inset border so it looks as if the button has been pressed */
}
You'll notice that I have chosen to make both sets of buttons look the same. You can do that too or you can make them look entirely different. With a little more specificity you can make them different on each different page of your site. But here, I made them all the same site-wide.
"Awesome! Uh, but wait it doesn't work in my browser. :dunno "
Well that's because you're using the world's worst browser, Microsoft IE6. MSIE doesn't recognize the :hover and :active states on anything but <a> elements. However, you'll notice that the buttons look just fine even though they don't change in IE. This is called degrading gracefully.
But let's say you want to do something like I've got on my site (http://photos.mikelanestudios.com/date/) - notice the "browse" button? :wink (IE isn't hacked as of yet so it'll look bad there, but that will change eventually...) The steps are eeerily similar to the ones above except you have to do a bit of work first. You need to create yourself a button. But you don't want it to be any ordinary button. No, no. You want it to be 2 buttons in one. Why? Well so you can do CSS sprites of course!
Now, I can't very well justify just giving away my buttons now can I? So what I did was to create you a set of your own. These are super easy even if you're a Photoshop clown. All you have to do is use the rounded rectangle tool and set a layer style and save it as a png. That's exactly what I did and it takes all of 2 minutes.
http://mikelane.smugmug.com/photos/61997394-O.png
See? 2 buttons in one. You could even do 3 if you're feeling feisty! We'll make it so only one of the colors will show at any given time by using the :hover and :active pseudo classes and a little background positioning. So let's assume again that you want all of your buttons to look the same. Once you get that image (or your own image) saved to your site (please don't steal my bandwidth!) simply copy the URL down and then use a code like this:
EDIT: You know what I love? IE. Love it. I should have realized that IE would try to squash the two pills above into one compact little area thus leaving Andy broken and sobbing. Well buck up Andrew! All we'll need is a quick fix. First thing you need to do is to create an entirely new button just for IE. This time with only one pill. If you're a photoshop jester like me you can simply go into the psd, copy one of the pill layers into a new document, crop, save and post like so:
http://mikelane.smugmug.com/photos/62023846-O.png
Now upload that button to your smugmug site, note the URL, and use it in the magenta code below. My God I hate IE.
EDIT 2: I still hate IE... The default value for the background property is transparent if you leave it out like I did. Guess who doesn't know that? The IE developers. Yay! So add the yellow now. I think I'm going to run out of colors soon at this rate.
EDIT 3: Well I'm a complete moron... Duh, if the background is defined with a png and not overridden in IE of course it's not going to be fixed. So ignore edit 2 and revel in the edit 3 sea green goodness.
.buttons,
.smbuttons { /* select all the normal state buttons */
background:url(/photos/XXXXXXXX-O.png) top no-repeat; /* set the background to your uploaded image file and make sure the top is at the top and it doesn't repeat; */
_background:transparent;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true, sizingMethod=scale, src='/photos/YYYYYYYY-O.png'); /* make IE able to handle the png transparency */
border:0; /* we don't want a border for this example */
height:20px; /* Set the button height to be the same as the height of one of your buttons */
width:85px; /* Set the button width to be the same as the width of your buttons */
color:#000; /* set a text color that is readable on that button */
}
.buttons:hover,
.smbuttons:hover { /* select the hover state for the buttons */
background-position:bottom; /* Our hover state is on the bottom so make it so the bottom of the background image is at the bottom of the container */
border:0; /* still no border on the hover */
height:20px; /* make double sure the dimensions don't change */
width:85px;
color:#000; /* set a text color that is readable on that button */
}
.buttons:active,
.smbuttons:active { /* very optional */
position:relative; /* needed for the next set of rules */
top:1px; /* these 2 make the button move down and right one pixel as if it were being pushed downward */
left:1px;
}
The other thing you're going to have to do is to hack IE to make it so the buttons work. That is the code that I highlighted in purple above. Just slip the same number replacement for XXXXXXXX in there as you did for the background image url right above it.
And there you have it. Fancy pants buttons. Don't be afraid to stray away from the mac-ish conformity of the plasticy-glassy gell-like button either!