Advanced Search

Return to Snippet

Revision: 17202
at August 26, 2009 23:45 by webdevelopertut
Initial Code 
Follow this simple steps... Download the png file to have the gradient button. And copy the HTML and CSS code. So you will not be creating different image, just this png image will do the magic.

HTML:
<a href="#" class="btn ovrlay ">Super Awesome Button</a>

CSS:
.btn{font:13px arial;color:#fff;text-decoration:none;}
.btn:hover{background:#630030;}
.ovrlay{background:#A9014B url(btn-overlay.png) repeat-x;padding:5px 10px 6px;position:relative;}
.btn{background-color:#E33100;border:1px solid #7c1f06}

Just change the color of the .btn class, similarly you can have different n number of buttons by just change the class....
Initial URL 
http://htmlcsstutorials.blogspot.com/2009/08/create-gradient-buttons-using-css.html
Initial Description 

                                

                                                            

                                    

                                        

                                        Initial Title
                                        

                                    

                                    
Create gradient buttons using css

                                

                                                            

                                    

                                        

                                        Initial Tags
                                        

                                    

                                    
css, button

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
CSS