How To Create A Transparent Button And Add Hover Effect Using CSS

Posted by in Articles, css, Programming

Transparent buttons are less used in web designing, but it can be a great help if you take care the minute part of your design. Though it’s not widely used, it can be one of the best ideas to maintain the size and number of images your website uses.

For example, when you want to add hover effect to the button, you’ll probably create two different buttons with similar dimension but variation in color to add hover effect to it. This makes your browser to request two different images from the server. But you can use just a single image and add hover effect to it using transparent button.

In this tutorial, I’ll show you a new possibility that you can apply to your next designs. The basic idea is to create a transparent or semi-transparent region in your button design. Then, using CSS background properties in both normal and hover state to animate the button.

Let’s see the demo first. Here you can see the working demo.

Let’s create a transparent button.

Open Photoshop and create about 130 X 35 px transparent RGB document.

A new transparent layer will be created.

Fill that transparent Layer with white background (ALT + Backspace).

Add new layer to it by clicking on Create New Layer button.

You can also press CTRL + SHIFT + N to create a new layer.

Leave the Layer 1 as it is. Since curved rectangle buttons are popular let’s create it in Layer 2. In Tools Bar choose Rounded Rectangle Tool (U). If you don’t see the Rounded Rectangle, hold down SHIFT and tap U to cycle between the Shape Tools.

By default, shape tools create a shape and background image to add color to the shape. But it will only make things complex. To avoid this, click on Path only button as shown in the image below:

Then start drawing the shape of button.

Make sure that you are creating shapes in Layer 2 not in Layer 1 with white background.

Now go to Paths in Layers tool box, select the Work Path. Click on ”Load Path as a selection” button as show in the image.

This will create the active marquee selection from the paths.

With marquee selection being active, go back to Layer tab.

Fill the selection with any color but white.

You’ll have the new button in Layer 2.

We’ll add some style to it to make it pleasing. Right click on Layer 2 and choose Blending Options.

Add Gradient Overlay style to it.

Apply Dark Grey and Grey, gradient to it and click OK button.

Now let’s add some text to the button. Press T to bring up the Text creator tool and type your button text there.

Hold down CTRL and click on the T icon in the layer tool box. This will select the text layer.

Now without de-selecting the selection, choose Layer 2 and Press delete button. This will create a hole in the button with button’s text engraved in it. Do same with Layer 1.

After you are done, delete the text layer.

You’ll see whole and checker boxes; that mean this region is transparent.

Again Hold CTRL and click on the Layer 2 to make the selection of the round rectangle button. Then similarly as above, select Layer 1 and press Delete button.

Choose Layer 2 and set it’s Opacity to about 60%.

I know that the button will look ugly. But it will look beautiful after applying CSS to it. You’ve successfully created the transparent button. Save it as web in PNG-24 Format.

Now let’s head towards coding. Create a simple HTML hyper link to the image.

<a href="#"><img src="button.png" width="150" height="35" alt="button"></a>

Add class button attributes to the IMG tag.

<a href="#"><img src="button.png" width="150" height="35" alt="button"></a>

This is the simple HTML part and we are done with HTML. Now for the CSS styling part.

Add the following style to Button class.

<style>

.button {

border:0;

background:#333;

}

.button:hover {

background:#9CF;

}

</style>

We’ve coded two different properties for .button, background and border. Border poperty will remove the border in your image and background properly sets the background of the button in in-active state.

.button:hover will be active when we hover the mouse over the button. You can set any background color to it.

The in-active state button will be like this:

And when you hover over it, this will be the result:

This will look like two images being used but you are actually using only one image to add this effect.

Hope you loved this tutorial.

This is the guest post written by DigitalBunch.com