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!

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

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 in the loop: Get your dose of frontend twice a week

👾 Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox.

Zero fluff, all quality, to make your Mondays and Thursdays more creative!

Feedback 1

Comments are closed.