Creating a glassy/glowing gradient button is becoming more straight forward, the logic and the syntax becoming easier to understand and to get to grips with. And of course, the really useful thing about CSS gradients, is that they’re totally scalable. The code snippet for this button creates an elegant whilst modern looking button with glow on mouse over. I’ve tried to keep the hard work in the CSS, reducing the need for bloaty spans, divs and wotnot. The snippet can be implemented purely on a link element. Hope you'll like it Screenshot: CSS: .gbutton { font:2em/100% Trebuchet, "Times New Roman", Times, serif; color:white; text-decoration:none; text-shadow:1px 1px 1px #222; display:inline-block; padding:10px 20px 7px; border:1px solid; border-color:#254862; background: url(royal-glow-bg-st.png) repeat-x center left; background:-webkit-linear-gradient(top,#5D85A3 50%, #162B3B 50%, #388FD3 100%); background:-moz-linear-gradient(top,#5D85A3 50%, #162B3B 50%, #388FD3 100%); background:-ms-linear-gradient(top,#5D85A3 50%, #162B3B 50%, #388FD3 100%); background:-o-linear-gradient(top,#5D85A3 50%, #162B3B 50%, #388FD3 100%); background:linear-gradient(top,#5D85A3 50%, #162B3B 50%, #388FD3 100%); -webkit-border-radius:3px; -moz-border-radius:3px; -ms-border-radius:3px; -o-border-radius:3px; border-radius:3px; -webkit-box-shadow:0px 0px 2px #333; -moz-box-shadow:0px 0px 2px #333; -ms-box-shadow:0px 0px 2px #333; -o-box-shadow:0px 0px 2px #333; box-shadow:0px 0px 3px #333; } .gbutton:hover { background-image: url(royal-glow-bg-hover.png); background:-webkit-linear-gradient(top,#8ED3FF 0%, #5D85A3 50%, #254862 50%,#4FAAF1 100%); background:-moz-linear-gradient(top,#8ED3FF 0%, #5D85A3 50%, #254862 50%,#4FAAF1 100%); background:-ms-linear-gradient(top,#8ED3FF 0%, #5D85A3 50%, #254862 50%,#4FAAF1 100%); background:-o-linear-gradient(top,#8ED3FF 0%, #5D85A3 50%, #254862 50%,#4FAAF1 100%); background:linear-gradient(top,#8ED3FF 0%, #5D85A3 50%, #254862 50%,#4FAAF1 100%); -webkit-box-shadow: 0px 0px 5px red; -moz-box-shadow: 0px 0px 5px #3891D6; -ms-box-shadow: 0px 0px 5px #3891D6; -o-box-shadow: 0px 0px 5px #3891D6; box-shadow: 0px 0px 9px #388FD3; } Code (markup): HTML: <a href="#" class="gbutton">CSS3 Gradient Button</a> HTML: Live Preview: http://jsfiddle.net/Qdu9R/
Some advice to speed up the rendering and lower memory use -- Browsers are too stupid to realize that they don't need to make the buffer image for linear-gradient the full size of the element; it will create that gradient the entire size of the element sucking down a lot of RAM and in some browsers (on lesser hardware like netbooks or tablets) it can make things like hover states have this annoying lag. the solution? Background-size. background-size:1px 100%; Make sure repeat-x is set, and it will use less memory and draw faster. Though really if you're going to link to a fallback image, I'd suck it up and just use the fallback image. Also, you don't need to say -o, -ms or -moz for border-radius or box-shadow, and Opera has supported prefixless linear-gradient since v12 some year and a half ago... in general FF has announced they are dropping vendor prefies, and Opera and IE don't use them for a lot of the older properties. Chrome has also announced they are dropping them, but deployment on that lags and you still need to say -webkit for Safari. Oh, and if it's 0px you don't need to say px... and you REALLY should have a fallback background-color for pre CSS-3 browsers when images are unavailable/blocked... and you probably should be saying background-image on those linear-gradient so that the invalid properties dont' mess up the missing values. (It happens -- strange as it is) ... and since that's an anchor you should probably also be trapping :active and :focus so people keyboard navigating aren't left out in the cold. ... AND (here we go) it's usually a bad idea to set the line height shorter than 120%, which is probably why you are playing with the uneven padding. So something more like this: .gButton { display:inline-block; padding:0 0.75em; font:200%/200% Trebuchet, "Times New Roman", Times, serif; color:white; text-decoration:none; text-shadow:0.1em 0.1em 0.2em #222; border:1px solid #246; background:#048 url(royal-glow-bg-st.png) 0 0 repeat-x; background-image:-webkit-linear-gradient(top,#5D85A3 50%, #162B3B 50%, #388FD3 100%); background-image:-moz-linear-gradient(top,#5D85A3 50%, #162B3B 50%, #388FD3 100%); background-image:-ms-linear-gradient(top,#5D85A3 50%, #162B3B 50%, #388FD3 100%); background:linear-gradient(top,#5D85A3 50%, #162B3B 50%, #388FD3 100%); background-size:1px 100%; -webkit-border-radius:0.2em; border-radius:0.2em; -webkit-box-shadow:0 0 0.1em #333; box-shadow:0 0 0.1em #333; } .gButton:active, .gButton:focus, .gButton:hover { background:#06A url(royal-glow-bg-hover.png) 0 0 repeat-x; background-image:-webkit-linear-gradient(top,#8ED3FF 0%, #5D85A3 50%, #254862 50%,#4FAAF1 100%); background-image:-moz-linear-gradient(top,#8ED3FF 0%, #5D85A3 50%, #254862 50%,#4FAAF1 100%); background-image:-ms-linear-gradient(top,#8ED3FF 0%, #5D85A3 50%, #254862 50%,#4FAAF1 100%); background-image:linear-gradient(top,#8ED3FF 0%, #5D85A3 50%, #254862 50%,#4FAAF1 100%); -webkit-box-shadow: 0 0 0.3em #388FD3; box-shadow:0 0 0.3em #388FD3; } Code (markup): Swings an axe at all the properties you don't need... though depending on how that image is set up one should tweak the background-color to match the bottom-most pixel of those png's should the dynamic sizes end up larger than the image on older browsers (that don't know background-size).
my fault is forgotting to put and set Backgound and Font Size of these button.. Anyway thanks for the correct
you can compress any css or html code using compressor tool, like one of these http://htmlcompressor.com/compressor if you use GIMP it would increase the page load time.
Creating a file that's probably larger than the code, harder to make changes to, needs to be redrawn every time you want different text or use just as much code for sliding doors, more thank likely using IMG to do plaintext's job semantically, and of course who can forget that extra handshake making the page load slower. Though there ARE times I'd just use an image -- realistically I'd not do a linear gradient; I'd see if I could pull it off using an inset box-shadow instead.