Liquid & Colour Adjustable CSS Buttons

Wouldn't it be great if you could have awesome looking image based buttons, rounded, glass, web 2.0 looking without having to create a new button for each colour you needed. For example many sites might have different colouration for different sections or pages. Well there is a rather ingenious way of doing this using an image and CSS to do this.

 

Wanna see? ok, (click the image)

demo

 

Step 1.

Create a Transparent Button

  1. We will first open up the file and ditch unnecessary layers like the reflection, shadow, and text. Next, select the “Button Base” layer and let’s turn down the Fill to 0% (Top right corner on the layer palette.) Also in your ‘effects’ get rid of the red gradient Overlay.  
    step1_cleanup
  2. Now we need to select the shape of our “Button Base” layer by clicking on the “Vector Mask Thumbnail” (the thumbnail on the right of the chain icon) while holding the ‘Ctrl’ Key on your keyboard. With the selection highlighted, lets create a new layer (‘Ctrl‘ + ‘Shift’ + ‘N’) and name it “Gradient Fade”. Fill it with a ‘Transparent to Black’ gradient. Tone down the gradient by making the Opacity to 50%. (Now you should have a light grey/gradient button). 
    step1_crop
  3. Select the shape of our “Button Base” layer again, and from here we need to invert the selection (‘Ctrl’ + ‘Shift’ + ‘I’). If you did this correct you should see a dotted line around the button and also around the canvas. With the inverse selection still selected, let’s now create a new layer named “Mask” and fill it with a white background. 
    step1_gradient
  4. Hide and turn off the visibility on the “Background” layer so now should have a transparent background. Now crop the button to 160px by 40px. 
    step1_mask
 

Step 2.

Slice Buttons

At this point, we now have to slice our button into 3 pieces.
Slice A – Should be the left side of the button, save this image as btn_left.png
Slice B – Should be the center piece that stretches, save this image as btn_stretch.png
Slice C – Should be the right side of the button, save this image as btn_right.png

step2_slicing

 

 

Step 3.

HTML / CSS

The HTML

div class="btn"><a href="#">Add to Carta><span>span>div>

 

The CSS

body {
margin: 0;
padding: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
}
.btn {
float: left;
clear: both;
background: url(images/btn_left.png) no-repeat;
padding: 0 0 0 10px;
margin: 5px 0;
}
.btn a{
float: left;
height: 40px;
background: url(images/btn_stretch.png) repeat-x left top;
line-height: 40px;
padding: 0 10px;
color: #fff;
font-size: 1em;
text-decoration: none;
}
.btn span {
background: url(images/btn_right.png) no-repeat;
float: left;
width: 10px;
height: 40px;
}

The beauty of this technique comes into play after all of this is done. Now that the button is liquid and transparent, to adjust colors of our buttons, now all we have to do is add a colored background to them.

.btn_addtocart { background-color: green; }
.btn_checkout { background-color: red; }
.btn_learnmore { background-color: orange; }

 

This is how you would implement these styles in our html

<div class="btn btn_addtocart"><a href="#">Add to Carta><span>span>div>
<div class="btn btn_checkout"><a href="#">Check Outa><span>span>div>
<div class="btn btn_learnmore"><a href="#">Learn Morea><span>span>div>

 

that's it, here are  a few recourses to help you through

Download the sample HTML and CSS (and images)

Download the button as a PSD

----------------------------------------------------------------------

Now I cant take credit for this solution, full credits need to go to Soh Tanaka, however it sees his site has been pulled down, so I thought I’d share this with you.

Tags
Downloads , Web Design , css , Tips and Tricks
Share

Categories

Tags

Archive