CSS button with hover effect

Inspired by the nice download button on the jquery homepage I created this button with a hover effect. It uses opacity options for all browsers. You can see a demo here: JButton Demo Download the zip with all the containing files here: JButton The style for the button consists of the following classes: a.jbutton{ background: […]

Inspired by the nice download button on the jquery homepage I created this button with a hover effect. It uses opacity options for all browsers. You can see a demo here: JButton Demo

jbuttonscreen
Click to see a DEMO of the button

Download the zip with all the containing files here: JButton

The style for the button consists of the following classes:

a.jbutton{
 background: transparent url(buttonleft.png) no-repeat top left;
 display: block;
 float: left;
 font: 22px "Tahoma";
 line-height: 49px; /* This value + 8px should equal height of the button */
 height: 57px;
 padding-left: 9px; /* Left part of image */
 text-decoration: none;
 outline:none;
 color:white;
 cursor:pointer;
 filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
 opacity: 1;
 -moz-opacity: 0.99;
}
a.jbutton span{
 background: transparent url(buttonright.png) no-repeat top right;
 display: block;
 padding: 4px 9px 6px 0; /*Set right padding here to 'padding-left' value above*/
 text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
a.jbutton:link, a.jbutton:visited{
 color: #F0F0F0; /* button text color */
}
a.jbutton:hover{
 filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
 opacity: 0.8;
 -moz-opacity: 0.8;
}
a.jbutton:hover span{
 color: #FFFFFF;
}

We have two images, the left and the right side of the button. Depending on the size of the text, the button will expand (up to 200px).

I also added some text shadow which will not work in IE though.

The html is very simple:

<a class="jbutton"><span> &#157; Ask a question</span></a>

The special character is a the question mark which I just added for fun.

Enjoy!

Previous:
Next:

Tagged with:

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://www.codrops.com

Related Articles

Receive our bi-weekly Collective or official newsletter right in your inbox.

Which newsletter would you like to receive?

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 1

Comments are closed.

Comments are closed.