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 […]

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!

Tagged with:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 1

Comments are closed.