From our sponsor: Chromatic - Visual testing for Storybook, Playwright & Cypress. Catch UI bugs before your users do.
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: 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>  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.
hi.
I experimented a code for a css button with a hover effect.Just check it out here .http://www.jasica.in/2011/05/stylish-css3-read-more-button-with.html