New Button
New Button
Often times, especially when designing a web application with a developer, there will be a need to automate things. One of these is to develop a button or series of buttons that are dynamic and will fit most any text.
Here is a pretty easy way to do this using css.
For starters you'll want to design your button. Click here for a post on creating a web 2.0 button.
This button can be basic, or in this example a series of buttons with different icons to the left.
After your button is designed, cut it up and save it into two pieces. A left and a right as shown below.
The Idea behind this is to use the left as the fixed image and the right as the piece that will expand.
Make sure they are lined up.
Now for a brief description of the code behind:
.one and .two - are to indicate the image on the left. To add more simply create new left /images and repeat. ie three, four, five, etc..
.ButtonLeft - are the settings for the left portion of the button
a.ButtonLeft:hover strong - indicates the hover color of the text
strong.light - indicates the right portion of the button
.ButtonRight - contains all of the settings for the right portion of the button
It's easy to create new buttons with the same code but switch out the left icon.
Basically create and name your new left image, copy the ".one" style and name it ".two".
Change "ButtonLeft one" to "ButtonLeft two"
And that's it.
To download of this project click here.
