CINXE.COM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml" dir="ltr" lang="en-US"><head><script type="text/javascript" src="/_static/js/bundle-playback.js?v=HxkREWBo" charset="utf-8"></script> <script type="text/javascript" src="/_static/js/wombat.js?v=txqj7nKC" charset="utf-8"></script> <script>window.RufflePlayer=window.RufflePlayer||{};window.RufflePlayer.config={"autoplay":"on","unmuteOverlay":"hidden"};</script> <script type="text/javascript" src="/_static/js/ruffle/ruffle.js"></script> <script type="text/javascript"> __wm.init("https://web.archive.org/web"); __wm.wombat("http://bavotasan.com:80/tutorials/gradient-buttons-with-css3/","20100712023955","https://web.archive.org/","web","/_static/", "1278902395"); </script> <link rel="stylesheet" type="text/css" href="/_static/css/banner-styles.css?v=S1zqJCYt" /> <link rel="stylesheet" type="text/css" href="/_static/css/iconochive.css?v=3PDvdIFv" />  <link rel="stylesheet" type="text/css" href="https://web.archive.org/web/20100712023955cs_/http://bavotasan.com/wp-content/w3tc/min/default.include.css" media="all"/><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><meta name="googlebot" content="index,archive,follow,noodp"/><meta name="robots" content="all,index,follow"/><meta name="msnbot" content="all,index,follow"/><meta name="description" content="I have been having a lot of fun messing around with CSS3 and received a lot of emails since I posted my tutorial for Creating Shadows with CSS3. I decided ..."/><meta name="keywords" content="anchor,Anchor Tag,buttons,ccc,cccccc,Chrome,Click,Creating,cross browser,css3,ddd,draw,fff,gradient button,latest versions,Padding,progid,radius,rgba,rounded corners,safari,Style,tag,text decoration,text shadow,time,"/><title>Gradient Buttons with CSS3 | bavotasan.com</title><link rel="pingback" href="http://bavotasan.com/xmlrpc.php"/><link rel="alternate" type="application/rss+xml" title="bavotasan.com 禄 Feed" href="https://web.archive.org/web/20100712023955/http://bavotasan.com/feed/"/><link rel="alternate" type="application/rss+xml" title="bavotasan.com 禄 Comments Feed" href="https://web.archive.org/web/20100712023955/http://bavotasan.com/comments/feed/"/><link rel="alternate" type="application/rss+xml" title="bavotasan.com 禄 Gradient Buttons with CSS3 Comments Feed" href="https://web.archive.org/web/20100712023955/http://bavotasan.com/tutorials/gradient-buttons-with-css3/feed/"/> <script type="text/javascript" src="https://web.archive.org/web/20100712023955js_/http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2"></script> <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://bavotasan.com/xmlrpc.php?rsd"/><link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://bavotasan.com/wp-includes/wlwmanifest.xml"/><link rel="index" title="bavotasan.com" href="http://bavotasan.com/"/><link rel="start" title="Removing Images from a WordPress Post: Redux" href="http://bavotasan.com/tutorials/removing-images-from-a-wordpress-post/"/><link rel="prev" title="Sliderota jQuery Plugin" href="https://web.archive.org/web/20100712023955/http://bavotasan.com/downloads/sliderota-jquery-plugin/"/><link rel="next" title="Moving to Media Temple" href="https://web.archive.org/web/20100712023955/http://bavotasan.com/articles/movin-to-media-temple/"/><link rel="canonical" href="https://web.archive.org/web/20100712023955/http://bavotasan.com/tutorials/gradient-buttons-with-css3/"/><link rel="shortlink" href="https://web.archive.org/web/20100712023955/http://wp.me/pmjlM-w2"/> <script type="text/javascript" src="https://web.archive.org/web/20100712023955js_/http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script> <meta property="fb:admins" content="586505548"/><meta property="og:site_name" content="bavotasan.com"/><meta property="og:title" content="Gradient Buttons with CSS3"/><meta property="og:description" content="I have been having a lot of fun messing around with CSS3 and received a lot of emails since I posted my tutorial for Creating Shadows with CSS3. I decided that putting together a quick tutorial on how to use multiple CSS3 effects at the same time to create a cool looking gradient button would [...]"/><meta property="og:type" content="article"/><meta property="og:image" content="https://web.archive.org/web/20100712023955im_/http://bavotasan.com/wp-content/uploads/2010/04/gradientbutton.png"/></head><body class="single single-post postid-1986"><div id="bodywrap"> <script type="text/javascript">(function(){var bsa=document.createElement('script');bsa.type='text/javascript';bsa.async=true;bsa.src='//web.archive.org/web/20100712023955/http://s3.buysellads.com/ac/bsa.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa);})();</script> <div id="header"><div id="topmenu" class="menu-top-menu-container"><ul id="menu-top-menu" class="menu"><li id="menu-item-2254" class="menu-item menu-item-type-custom"><a href="https://web.archive.org/web/20100712023955/http://themes.bavotasan.com/">Themes by bavotasan.com</a></li><li id="menu-item-2255" class="menu-item menu-item-type-custom"><a href="https://web.archive.org/web/20100712023955/http://support.bavotasan.com/">Support Forum</a></li><li id="menu-item-2259" class="menu-item menu-item-type-custom"><a href="https://web.archive.org/web/20100712023955/http://themes.bavotasan.com/affiliates">Affiliates</a></li><li id="menu-item-2256" class="menu-item menu-item-type-post_type"><a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/about/">About</a></li><li id="menu-item-2257" class="menu-item menu-item-type-post_type"><a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/services/">Services</a></li><li id="menu-item-2258" class="menu-item menu-item-type-post_type"><a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/contact/">Contact</a></li></ul></div><div id="title"> <a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/"> <img src="https://web.archive.org/web/20100712023955im_/http://bavotasan.com/images/bavotasan.png" alt="bavotasan.com" width="400" height="70"/> <span id="desc"></span></a></div><div id="follow"> <span></span> <a href="https://web.archive.org/web/20100712023955/http://twitter.com/bavotasan" class="twitter"></a> <a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/feed/" class="rss"></a></div><div id="navigation" class="menu-main-menu-container"><ul id="menu-main-menu" class="menu"><li id="menu-item-2264"><a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/"><span></span>Home</a></li><li id="menu-item-2266"><a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/category/articles/"><span></span>Articles</a></li><li id="menu-item-2265" class="current-menu-item"><a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/category/tutorials/"><span></span>Tutorials</a></li><li id="menu-item-2267"><a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/category/downloads/"><span></span>Downloads</a></li></ul></div></div><div id="mainwrapper"><div id="leftcontent"><div class="posttop"><div class="thedate"><div class="month">Apr</div><div class="day">28</div><div class="year">2010</div></div><h1>Gradient Buttons with CSS3</h1> <br class="clear"/><p>I have been having a lot of fun messing around with CSS3 and received a lot of emails since I posted my tutorial for <a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/tutorials/creating-shadows-css3/">Creating Shadows with CSS3</a>. I decided that putting together a quick tutorial on how to use multiple CSS3 effects at the same time to create a cool looking gradient button would show people just how amazing CSS3 is.<br/> <span id="more-1986"></span><br/> The only draw back to using some of these effects is that they are not 100% cross browser compatible. Check out this page in the latest versions of Firefox, Safari or Chrome to really see the effects in action.</p><p>I’m going to style an anchor tag for my button so first I need to create some HTML:</p><div class="wp_syntax"><table border="0" cellpadding="0" cellspacing="0"><tr><td><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #339933;"><</span>a href<span style="color: #339933;">=</span><span style="color: #0000ff;">"#"</span> <span style="color: #000000; font-weight: bold;">class</span><span style="color: #339933;">=</span><span style="color: #0000ff;">"button"</span><span style="color: #339933;">></span>This is my button<span style="color: #339933;"></</span>a<span style="color: #339933;">></span></pre></div></td></tr></table></div><p>Now comes the fun part. Let’s start with the basic CSS necessary for our button:</p><div class="wp_syntax"><table border="0" cellpadding="0" cellspacing="0"><tr><td><div class="code"><pre class="css" style="font-family:monospace;">a<span style="color: #6666ff;">.button</span> <span style="color: #00AA00;">{</span> <span style="color: #000000; font-weight: bold;">border</span><span style="color: #00AA00;">:</span> <span style="color: #933;">1px</span> <span style="color: #993333;">solid</span> <span style="color: #cc00cc;">#ccc</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span> <span style="color: #933;">10px</span> <span style="color: #933;">20px</span> <span style="color: #933;">6px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#999</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">text-decoration</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">none</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> <span style="color: #933;">28px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">line-height</span><span style="color: #00AA00;">:</span> <span style="color: #933;">30px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#ddd</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">}</span></pre></div></td></tr></table></div><p><a href="javascript:void(0)" class="button-plain">This is my button</a></p><p>Now let’s add some rounded corners:</p><div class="wp_syntax"><table border="0" cellpadding="0" cellspacing="0"><tr><td><div class="code"><pre class="css" style="font-family:monospace;">a<span style="color: #6666ff;">.button</span> <span style="color: #00AA00;">{</span> <span style="color: #000000; font-weight: bold;">border</span><span style="color: #00AA00;">:</span> <span style="color: #933;">1px</span> <span style="color: #993333;">solid</span> <span style="color: #cc00cc;">#ccc</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span> <span style="color: #933;">10px</span> <span style="color: #933;">20px</span> <span style="color: #933;">6px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#999</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">text-decoration</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">none</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> <span style="color: #933;">28px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">line-height</span><span style="color: #00AA00;">:</span> <span style="color: #933;">30px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#ddd</span><span style="color: #00AA00;">;</span> border-radius<span style="color: #00AA00;">:</span> <span style="color: #933;">12px</span><span style="color: #00AA00;">;</span> -webkit-border-radius<span style="color: #00AA00;">:</span> <span style="color: #933;">12px</span><span style="color: #00AA00;">;</span> -moz-border-radius<span style="color: #00AA00;">:</span> <span style="color: #933;">12px</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">}</span></pre></div></td></tr></table></div><p><a href="javascript:void(0)" class="button-rounded">This is my button</a></p><p>Next comes the shadows:</p><div class="wp_syntax"><table border="0" cellpadding="0" cellspacing="0"><tr><td><div class="code"><pre class="css" style="font-family:monospace;">a<span style="color: #6666ff;">.button</span> <span style="color: #00AA00;">{</span> <span style="color: #000000; font-weight: bold;">border</span><span style="color: #00AA00;">:</span> <span style="color: #933;">1px</span> <span style="color: #993333;">solid</span> <span style="color: #cc00cc;">#ccc</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span> <span style="color: #933;">10px</span> <span style="color: #933;">20px</span> <span style="color: #933;">6px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#999</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">text-decoration</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">none</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> <span style="color: #933;">28px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">line-height</span><span style="color: #00AA00;">:</span> <span style="color: #933;">30px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#ddd</span><span style="color: #00AA00;">;</span> border-radius<span style="color: #00AA00;">:</span> <span style="color: #933;">12px</span><span style="color: #00AA00;">;</span> -webkit-border-radius<span style="color: #00AA00;">:</span> <span style="color: #933;">12px</span><span style="color: #00AA00;">;</span> -moz-border-radius<span style="color: #00AA00;">:</span> <span style="color: #933;">12px</span><span style="color: #00AA00;">;</span> box-shadow<span style="color: #00AA00;">:</span> <span style="color: #933;">1px</span> <span style="color: #933;">1px</span> <span style="color: #933;">2px</span> rgba<span style="color: #00AA00;">(</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">,</span>.5<span style="color: #00AA00;">)</span><span style="color: #00AA00;">;</span> -webkit-box-shadow<span style="color: #00AA00;">:</span> <span style="color: #933;">1px</span> <span style="color: #933;">1px</span> <span style="color: #933;">2px</span> rgba<span style="color: #00AA00;">(</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">,</span>.5<span style="color: #00AA00;">)</span><span style="color: #00AA00;">;</span> -moz-box-shadow<span style="color: #00AA00;">:</span> <span style="color: #933;">1px</span> <span style="color: #933;">1px</span> <span style="color: #933;">2px</span> rgba<span style="color: #00AA00;">(</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">,</span>.5<span style="color: #00AA00;">)</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">text-shadow</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#fff</span> <span style="color: #933;">0px</span> <span style="color: #933;">1px</span> <span style="color: #933;">1px</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">}</span></pre></div></td></tr></table></div><p><a href="javascript:void(0)" class="button-shadows">This is my button</a></p><p>And finally, the gradient:</p><div class="wp_syntax"><table border="0" cellpadding="0" cellspacing="0"><tr><td><div class="code"><pre class="css" style="font-family:monospace;">a<span style="color: #6666ff;">.button</span> <span style="color: #00AA00;">{</span> <span style="color: #000000; font-weight: bold;">border</span><span style="color: #00AA00;">:</span> <span style="color: #933;">1px</span> <span style="color: #993333;">solid</span> <span style="color: #cc00cc;">#ccc</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span> <span style="color: #933;">10px</span> <span style="color: #933;">20px</span> <span style="color: #933;">6px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#999</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">text-decoration</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">none</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> <span style="color: #933;">28px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">line-height</span><span style="color: #00AA00;">:</span> <span style="color: #933;">30px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#ddd</span><span style="color: #00AA00;">;</span> border-radius<span style="color: #00AA00;">:</span> <span style="color: #933;">12px</span><span style="color: #00AA00;">;</span> -webkit-border-radius<span style="color: #00AA00;">:</span> <span style="color: #933;">12px</span><span style="color: #00AA00;">;</span> -moz-border-radius<span style="color: #00AA00;">:</span> <span style="color: #933;">12px</span><span style="color: #00AA00;">;</span> box-shadow<span style="color: #00AA00;">:</span> <span style="color: #933;">1px</span> <span style="color: #933;">1px</span> <span style="color: #933;">2px</span> rgba<span style="color: #00AA00;">(</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">,</span>.5<span style="color: #00AA00;">)</span><span style="color: #00AA00;">;</span> -webkit-box-shadow<span style="color: #00AA00;">:</span> <span style="color: #933;">1px</span> <span style="color: #933;">1px</span> <span style="color: #933;">2px</span> rgba<span style="color: #00AA00;">(</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">,</span>.5<span style="color: #00AA00;">)</span><span style="color: #00AA00;">;</span> -moz-box-shadow<span style="color: #00AA00;">:</span> <span style="color: #933;">1px</span> <span style="color: #933;">1px</span> <span style="color: #933;">2px</span> rgba<span style="color: #00AA00;">(</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">,</span>.5<span style="color: #00AA00;">)</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">text-shadow</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#fff</span> <span style="color: #933;">0px</span> <span style="color: #933;">1px</span> <span style="color: #933;">1px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span> -webkit-gradient<span style="color: #00AA00;">(</span>linear<span style="color: #00AA00;">,</span> <span style="color: #000000; font-weight: bold;">left</span> <span style="color: #000000; font-weight: bold;">top</span><span style="color: #00AA00;">,</span> <span style="color: #000000; font-weight: bold;">left</span> <span style="color: #000000; font-weight: bold;">bottom</span><span style="color: #00AA00;">,</span> from<span style="color: #00AA00;">(</span><span style="color: #cc00cc;">#eeeeee</span><span style="color: #00AA00;">)</span><span style="color: #00AA00;">,</span> to<span style="color: #00AA00;">(</span><span style="color: #cc00cc;">#cccccc</span><span style="color: #00AA00;">)</span><span style="color: #00AA00;">)</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span> -moz-linear-gradient<span style="color: #00AA00;">(</span><span style="color: #000000; font-weight: bold;">top</span><span style="color: #00AA00;">,</span> <span style="color: #cc00cc;">#eeeeee</span><span style="color: #00AA00;">,</span> <span style="color: #cc00cc;">#cccccc</span><span style="color: #00AA00;">)</span><span style="color: #00AA00;">;</span> filter<span style="color: #00AA00;">:</span> progid<span style="color: #3333ff;">:DXImageTransform</span><span style="color: #6666ff;">.Microsoft</span>.gradient<span style="color: #00AA00;">(</span>startColorstr<span style="color: #00AA00;">=</span><span style="color: #ff0000;">'#eeeeee'</span><span style="color: #00AA00;">,</span> endColorstr<span style="color: #00AA00;">=</span><span style="color: #ff0000;">'#cccccc'</span><span style="color: #00AA00;">)</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">}</span></pre></div></td></tr></table></div><p><a href="javascript:void(0)" class="button-gradient">This is my button</a></p><p>For fun, let’s add a active effect to make the button actually look like it is being pressed when you click on it:</p><div class="wp_syntax"><table border="0" cellpadding="0" cellspacing="0"><tr><td><div class="code"><pre class="css" style="font-family:monospace;">a<span style="color: #3333ff;">:active</span><span style="color: #6666ff;">.button</span> <span style="color: #00AA00;">{</span> box-shadow<span style="color: #00AA00;">:</span> <span style="color: #933;">0px</span> <span style="color: #933;">0px</span> <span style="color: #933;">0px</span> rgba<span style="color: #00AA00;">(</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">,</span>.5<span style="color: #00AA00;">)</span><span style="color: #00AA00;">;</span> -webkit-box-shadow<span style="color: #00AA00;">:</span> <span style="color: #933;">0px</span> <span style="color: #933;">0px</span> <span style="color: #933;">0px</span> rgba<span style="color: #00AA00;">(</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">,</span>.5<span style="color: #00AA00;">)</span><span style="color: #00AA00;">;</span> -moz-box-shadow<span style="color: #00AA00;">:</span> <span style="color: #933;">0px</span> <span style="color: #933;">0px</span> <span style="color: #933;">0px</span> rgba<span style="color: #00AA00;">(</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">,</span>.5<span style="color: #00AA00;">)</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">position</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">relative</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">top</span><span style="color: #00AA00;">:</span> <span style="color: #933;">1px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">:</span> <span style="color: #933;">1px</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">}</span></pre></div></td></tr></table></div><p><a href="javascript:void(0)" class="button-gradient button-active">This is my button</a></p><div class="buttonbox"></div></div><div class="post"><div class="socialleft">If you liked reading this, please share it.</div><ul class="addtoany_list"><li><a href="https://web.archive.org/web/20100712023955/http://www.addtoany.com/add_to/twitter?linkurl=http%3A%2F%2Fbavotasan.com%2Ftutorials%2Fgradient-buttons-with-css3%2F&linkname=Gradient%20Buttons%20with%20CSS3" title="Twitter" rel="nofollow" target="_blank"><img src="https://web.archive.org/web/20100712023955im_/http://bavotasan.com/wp-content/plugins/add-to-any/icons/twitter.png" width="16" height="16" alt="Twitter"/></a></li><li><a href="https://web.archive.org/web/20100712023955/http://www.addtoany.com/add_to/facebook?linkurl=http%3A%2F%2Fbavotasan.com%2Ftutorials%2Fgradient-buttons-with-css3%2F&linkname=Gradient%20Buttons%20with%20CSS3" title="Facebook" rel="nofollow" target="_blank"><img src="https://web.archive.org/web/20100712023955im_/http://bavotasan.com/wp-content/plugins/add-to-any/icons/facebook.png" width="16" height="16" alt="Facebook"/></a></li><li><a href="https://web.archive.org/web/20100712023955/http://www.addtoany.com/add_to/digg?linkurl=http%3A%2F%2Fbavotasan.com%2Ftutorials%2Fgradient-buttons-with-css3%2F&linkname=Gradient%20Buttons%20with%20CSS3" title="Digg" rel="nofollow" target="_blank"><img src="https://web.archive.org/web/20100712023955im_/http://bavotasan.com/wp-content/plugins/add-to-any/icons/digg.png" width="16" height="16" alt="Digg"/></a></li><li><a href="https://web.archive.org/web/20100712023955/http://www.addtoany.com/add_to/delicious?linkurl=http%3A%2F%2Fbavotasan.com%2Ftutorials%2Fgradient-buttons-with-css3%2F&linkname=Gradient%20Buttons%20with%20CSS3" title="Delicious" rel="nofollow" target="_blank"><img src="https://web.archive.org/web/20100712023955im_/http://bavotasan.com/wp-content/plugins/add-to-any/icons/delicious.png" width="16" height="16" alt="Delicious"/></a></li><li><a href="https://web.archive.org/web/20100712023955/http://www.addtoany.com/add_to/stumbleupon?linkurl=http%3A%2F%2Fbavotasan.com%2Ftutorials%2Fgradient-buttons-with-css3%2F&linkname=Gradient%20Buttons%20with%20CSS3" title="StumbleUpon" rel="nofollow" target="_blank"><img src="https://web.archive.org/web/20100712023955im_/http://bavotasan.com/wp-content/plugins/add-to-any/icons/stumbleupon.png" width="16" height="16" alt="StumbleUpon"/></a></li><li><iframe src="https://web.archive.org/web/20100712023955if_/http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fbavotasan.com%2Ftutorials%2Fgradient-buttons-with-css3%2F&layout=button_count&show_faces=false&width=100&action=like&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowtransparency="true"></iframe></li></ul></div><div class="post"><p class="tags">Tags: <a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/tag/anchor/" rel="tag">anchor</a>, <a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/tag/anchor-tag/" rel="tag">Anchor Tag</a>, <a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/tag/buttons/" rel="tag">buttons</a>, <a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/tag/ccc/" rel="tag">ccc</a>, <a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/tag/cccccc/" rel="tag">cccccc</a>, <a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/tag/chrome/" rel="tag">Chrome</a>, <a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/tag/click/" rel="tag">Click</a>, <a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/tag/creating/" rel="tag">Creating</a>, <a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/tag/cross-browser/" rel="tag">cross browser</a>, <a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/tag/css3/" rel="tag">css3</a>, <a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/tag/ddd/" rel="tag">ddd</a>, <a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/tag/draw/" rel="tag">draw</a>, <a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/tag/fff/" rel="tag">fff</a>, <a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/tag/gradient-button/" rel="tag">gradient button</a>, <a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/tag/latest-versions/" rel="tag">latest versions</a>, <a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/tag/padding/" rel="tag">Padding</a>, <a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/tag/progid/" rel="tag">progid</a>, <a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/tag/radius/" rel="tag">radius</a>, <a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/tag/rgba/" rel="tag">rgba</a>, <a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/tag/rounded-corners/" rel="tag">rounded corners</a>, <a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/tag/safari/" rel="tag">safari</a>, <a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/tag/style/" rel="tag">Style</a>, <a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/tag/tag/" rel="tag">tag</a>, <a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/tag/text-decoration/" rel="tag">text decoration</a>, <a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/tag/text-shadow/" rel="tag">text shadow</a>, <a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/tag/time/" rel="tag">time</a></p><p class="tags">Short URL: <a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/?p=1986" title="Gradient Buttons with CSS3">http://bavotasan.com/?p=1986</a></p></div><div class="post"><div id="crp_related"><h3>Similar Posts</h3><ul><li><a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/tutorials/creating-shadows-css3/" rel="bookmark" class="crp_title">Creating Shadows with CSS3</a></li><li><a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/tutorials/a-simple-mouseover-hover-effect-with-jquery/" rel="bookmark" class="crp_title">A Simple Mouseover Hover Effect with jQuery</a></li><li><a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/tutorials/how-to-add-nested-comments-to-your-wordpress-theme/" rel="bookmark" class="crp_title">How to Add Nested Comments to Your WordPress Theme</a></li><li><a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/tutorials/scrolling-back-to-top-button-jquery/" rel="bookmark" class="crp_title">Creating a Scrolling Back to Top Button with jQuery</a></li><li><a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/tutorials/adding-a-simple-quicktag-to-the-html-editor-in-wordpress/" rel="bookmark" class="crp_title">Adding a Simple Quicktag to the HTML Editor in WordPress</a></li></ul></div><div id="bsap_1249050" class="bsarocks bsap_8982c17d635c33dbe23a7ef930777c37"></div></div><div class="post"> <a href="#comment_list"></a><div id="comments"><h3 id="comments-title">Discussion <small> 10 Comments</small></h3><ol class="commentlist"><li class="comment even thread-even depth-1" id="li-comment-9034"><div id="comment-9034"><div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20100712023955im_/http://0.gravatar.com/avatar/82ae24c1abb2d6a58b32478e190452af?s=60&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/></div><div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20100712023955/http://www.eavasi.ru/" rel="external nofollow" class="url">eavasi</a></span> <span class="commentdate"> on April 28, 2010 at 1:04 pm</span></div><div class="comment-text"><p>css3 like WordPress3.0 hit the unknown possibilities of their new. Thanx so much!!!</p></div><div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20100712023955/http://bavotasan.com/tutorials/gradient-buttons-with-css3/?replytocom=9034#respond" onclick="return addComment.moveForm("comment-9034", "9034", "respond", "1986")">Reply</a></div></div></li><li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-9035"><div id="comment-9035"><div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20100712023955im_/http://0.gravatar.com/avatar/28af3e39c0a1fe4c31367c7e9a8bcac3?s=60&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/></div><div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20100712023955/http://gregrickaby.com/" rel="external nofollow" class="url">Greg Rickaby</a></span> <span class="commentdate"> on April 28, 2010 at 1:07 pm</span></div><div class="comment-text"><p>Great tutorial! Thanks!</p></div><div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20100712023955/http://bavotasan.com/tutorials/gradient-buttons-with-css3/?replytocom=9035#respond" onclick="return addComment.moveForm("comment-9035", "9035", "respond", "1986")">Reply</a></div></div></li><li class="comment even thread-even depth-1" id="li-comment-9060"><div id="comment-9060"><div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20100712023955im_/http://1.gravatar.com/avatar/f1f957acbba44495361f7a3be881f3dd?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/></div><div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20100712023955/http://rod88.com/" rel="external nofollow" class="url">takahahsi</a></span> <span class="commentdate"> on April 28, 2010 at 10:11 pm</span></div><div class="comment-text"><p>Great but Problem with IE8</p></div><div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20100712023955/http://bavotasan.com/tutorials/gradient-buttons-with-css3/?replytocom=9060#respond" onclick="return addComment.moveForm("comment-9060", "9060", "respond", "1986")">Reply</a></div></div><ul class="children"><li class="comment byuser bypostauthor odd alt depth-2" id="li-comment-9077"><div id="comment-9077"><div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20100712023955im_/http://0.gravatar.com/avatar/0375e723bd400a99acb6f2e08d6ea190?s=60&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/></div><div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/" rel="external nofollow" class="url">c.bavota</a></span> <span class="commentdate"> on April 29, 2010 at 9:08 am</span></div><div class="comment-text"><p>Exactly! That is why I said to check it out in Safari, Firefox or Chrome. It doesn’t work in IE.</p></div></div></li></ul></li><li class="comment even thread-odd thread-alt depth-1" id="li-comment-9454"><div id="comment-9454"><div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20100712023955im_/http://1.gravatar.com/avatar/b3be4db772328d0feb6b6ca8e36d54a1?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/></div><div class="comment-author"> <span class="authorname">Kristina</span> <span class="commentdate"> on May 17, 2010 at 6:48 pm</span></div><div class="comment-text"><p>Lovely! but your gradient doesn’t show up on FF 3.5.9 (mac)… <img src="https://web.archive.org/web/20100712023955im_/http://bavotasan.com/wp-includes/images/smilies/icon_smile.gif" alt=":)" class="wp-smiley"/> Shows up in Google Chrome for mac great though! Just FYI</p></div><div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20100712023955/http://bavotasan.com/tutorials/gradient-buttons-with-css3/?replytocom=9454#respond" onclick="return addComment.moveForm("comment-9454", "9454", "respond", "1986")">Reply</a></div></div><ul class="children"><li class="comment byuser bypostauthor odd alt depth-2" id="li-comment-9455"><div id="comment-9455"><div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20100712023955im_/http://0.gravatar.com/avatar/0375e723bd400a99acb6f2e08d6ea190?s=60&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/></div><div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/" rel="external nofollow" class="url">c.bavota</a></span> <span class="commentdate"> on May 17, 2010 at 8:19 pm</span></div><div class="comment-text"><p>You should upgrade to Firefox 3.6.3.</p></div></div></li></ul></li><li class="comment even thread-even depth-1" id="li-comment-9525"><div id="comment-9525"><div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20100712023955im_/http://1.gravatar.com/avatar/d5171c350a877032908f18d3ab3239d5?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/></div><div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20100712023955/http://whitebot.com/" rel="external nofollow" class="url">Mike</a></span> <span class="commentdate"> on May 21, 2010 at 1:34 pm</span></div><div class="comment-text"><p>Excellent – looking forward to better/more support for CSS3. Thanks for the tutorial.</p></div><div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20100712023955/http://bavotasan.com/tutorials/gradient-buttons-with-css3/?replytocom=9525#respond" onclick="return addComment.moveForm("comment-9525", "9525", "respond", "1986")">Reply</a></div></div></li><li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-9629"><div id="comment-9629"><div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20100712023955im_/http://1.gravatar.com/avatar/1448d087d72cfb8b32fdd72f881c03ad?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/></div><div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20100712023955/http://www.deluxeblogtips.com/" rel="external nofollow" class="url">Deluxe Blog Tips</a></span> <span class="commentdate"> on May 22, 2010 at 10:30 am</span></div><div class="comment-text"><p>Very nice button:) Thanks for sharing.</p></div><div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20100712023955/http://bavotasan.com/tutorials/gradient-buttons-with-css3/?replytocom=9629#respond" onclick="return addComment.moveForm("comment-9629", "9629", "respond", "1986")">Reply</a></div></div></li><li class="comment even thread-even depth-1" id="li-comment-9974"><div id="comment-9974"><div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20100712023955im_/http://1.gravatar.com/avatar/dd3db935c10a124f19a367e4142fa8a6?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/></div><div class="comment-author"> <span class="authorname">Winjay</span> <span class="commentdate"> on June 1, 2010 at 4:08 am</span></div><div class="comment-text"><p>Seems to work in Opera as well.</p></div><div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20100712023955/http://bavotasan.com/tutorials/gradient-buttons-with-css3/?replytocom=9974#respond" onclick="return addComment.moveForm("comment-9974", "9974", "respond", "1986")">Reply</a></div></div></li><li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-11732"><div id="comment-11732"><div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20100712023955im_/http://0.gravatar.com/avatar/0eebd3043c2adbc585f1ae7a9f54dfec?s=60&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/></div><div class="comment-author"> <span class="authorname">ameenullah</span> <span class="commentdate"> on June 21, 2010 at 6:44 pm</span></div><div class="comment-text"><p>Easy demo! <img src="https://web.archive.org/web/20100712023955im_/http://bavotasan.com/wp-includes/images/smilies/icon_smile.gif" alt=":)" class="wp-smiley"/> thanxx</p></div><div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20100712023955/http://bavotasan.com/tutorials/gradient-buttons-with-css3/?replytocom=11732#respond" onclick="return addComment.moveForm("comment-11732", "11732", "respond", "1986")">Reply</a></div></div></li></ol><a name="respond"></a><div id="respond"><h3 id="reply-title">Leave a Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="/web/20100712023955/http://bavotasan.com/tutorials/gradient-buttons-with-css3/#respond" style="display:none;">Cancel reply</a></small></h3><form action="https://web.archive.org/web/20100712023955/http://bavotasan.com/wp-comments-post.php" method="post" id="commentform"><p class="comment-notes">Your email address will not be published. Required fields are marked <span class="required">*</span></p><p class="comment-form-author"><label for="author">Name</label> <span class="required">*</span><input id="author" name="author" type="text" value="" size="30" aria-required="true"/></p><p class="comment-form-email"><label for="email">Email</label> <span class="required">*</span><input id="email" name="email" type="text" value="" size="30" aria-required="true"/></p><p class="comment-form-url"><label for="url">Website</label><input id="url" name="url" type="text" value="" size="30"/></p><p>To enter code in the comment box, please place it between <strong><pre lang="php"> </pre></strong> tags. You don't have to convert any characters to their hex/HTML code. Just add your code the way you would to any code editor.</p><p class="comment-form-comment"><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea></p><p class="form-submit"> <input name="submit" type="submit" id="submit" value="Post Comment"/> <input type="hidden" name="comment_post_ID" value="1986" id="comment_post_ID"/> <input type="hidden" name="comment_parent" id="comment_parent" value="0"/></p></form></div></div></div></div><div id="sidebar"><div id="search"><form method="get" id="searchform" action="https://web.archive.org/web/20100712023955/http://bavotasan.com/"><div> <input type="text" class="search_input" value="Search" name="s" id="s" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}"/> <input type="hidden" id="searchsubmit" value="Search"/></div></form><div class="arrow"></div></div><div id="sideads"><div id="bsap_1237633" class="bsarocks bsap_8982c17d635c33dbe23a7ef930777c37"></div><br class="clear"/><div id="bsap_1237624" class="bsarocks bsap_8982c17d635c33dbe23a7ef930777c37"></div></div> <br class="clear"/><div class="line"></div><div class="side-widget"><h4>Most Popular Posts</h4><ul class="wppp_list"><li><a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/" title="Creating a Mouseover Fade Effect with jQuery ">Creating a Mouseover Fade Effect with jQuery </a></li><li><a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/downloads/magazine-basic-free-wordpress-theme/" title="Magazine Basic v2.6 WordPress Theme">Magazine Basic v2.6 WordPress Theme</a></li><li><a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/tutorials/a-simple-mouseover-hover-effect-with-jquery/" title="A Simple Mouseover Hover Effect with jQuery">A Simple Mouseover Hover Effect with jQuery</a></li><li><a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/downloads/full-sizebackground-image-jquery-plugin/" title="Full Size Background Image jQuery Plugin">Full Size Background Image jQuery Plugin</a></li><li><a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/tutorials/retrieve-the-first-image-from-a-wordpress-post/" title="Retrieve and Display Images from a WordPress Post">Retrieve and Display Images from a WordPress Post</a></li><li><a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/downloads/simple-image-grabber-wordpress-plugin/" title="Simple Image Grabber WordPress Plugin">Simple Image Grabber WordPress Plugin</a></li><li><a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/tutorials/processing-multiple-forms-on-one-page-with-php/" title="Processing Multiple Forms on One Page with PHP">Processing Multiple Forms on One Page with PHP</a></li><li><a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/tutorials/remove-the-title-attribute-from-wordpress-category-and-page-lists/" title="Remove the Title Attribute from WordPress Category and Page Lists">Remove the Title Attribute from WordPress Category and Page Lists</a></li><li><a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/tutorials/gradient-buttons-with-css3/" title="Gradient Buttons with CSS3">Gradient Buttons with CSS3</a></li><li><a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/tutorials/limiting-the-number-of-words-in-your-excerpt-or-content-in-wordpress/" title="Excerpt or Content Word Limit in WordPress: Redux">Excerpt or Content Word Limit in WordPress: Redux</a></li></ul></div><div id="affiliates-ads"> <a href="https://web.archive.org/web/20100712023955/http://themes.bavotasan.com/"><img src="https://web.archive.org/web/20100712023955im_/http://bavotasan.com/images/themes.png" alt="Themes by bavotasan.com" class="themes" width="260" height="241"/></a> <a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/downloads/delete-duplicate-posts-pro-wordpress-plugin/"><img src="https://web.archive.org/web/20100712023955im_/http://bavotasan.com/images/ddp-ad.png" class="sideads" alt="Delete Duplicate Posts Pro" width="125" height="125"/></a> <a href="https://web.archive.org/web/20100712023955/https://www.e-junkie.com/ecom/gb.php?cl=88539&c=ib&aff=93121"><img src="https://web.archive.org/web/20100712023955im_/http://bavotasan.com/images/diggword.png" alt="Digging into WordPress" class="sideads" width="125" height="125"/></a> <a href="https://web.archive.org/web/20100712023955/https://www.e-junkie.com/ecom/gb.php?cl=94455&c=ib&aff=93121" target="ejejcsingle"><img src="https://web.archive.org/web/20100712023955im_/http://bavotasan.com/images/WP-Defender-Cover2.jpg" alt="WordPress Defender" width="125" height="125" class="sideads"/></a> <a href="https://web.archive.org/web/20100712023955/https://secure1.inmotionhosting.com/cgi-bin/gby/clickthru.cgi?id=tinkerpriest&page=7"><img src="https://web.archive.org/web/20100712023955im_/http://bavotasan.com/images/inmotion.gif" class="sideads" width="125" height="125"/></a></div><div class="line"></div><div class="side-widget redlink"><h4>Get a Premium Theme for FREE</h4><p><a href="https://web.archive.org/web/20100712023955/https://secure1.inmotionhosting.com/cgi-bin/gby/clickthru.cgi?id=tinkerpriest" class="wordpress-logo"></a>Don't have a Web site? How would you like to have WordPress and a <a href="https://web.archive.org/web/20100712023955/http://themes.bavotasan.com/category/premium-themes">Themes by bavotasan.com</a> Premium theme installed and configured for <em>FREE</em>? All you need to do is <a href="https://web.archive.org/web/20100712023955/https://secure1.inmotionhosting.com/cgi-bin/gby/clickthru.cgi?id=tinkerpriest">sign up with InMotion Hosting through this link</a>. <br/> <br/> <a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/free-premium-theme/" class="fr"><em>Click here for more information »</em></a></p></div><div class="side-widget"><h4>Support c.bavota</h4><p>If you would like to support <a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/">c.bavota</a> and <a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/">bavotasan.com</a>, please use the donate link below. Any amount, even $1.00, is appreciated (a man's gotta eat, ya know).</p> <a href="https://web.archive.org/web/20100712023955/https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=5745952" id="donate" class="fr">Donate</a></div><div id="bsap_1249036" class="bsarocks bsap_8982c17d635c33dbe23a7ef930777c37"></div></div></div></div><div class="whiteline"></div><div id="footer"><div id="bottombar"> <a href="javascript:void(0)" class="backtotop">Back to Top<span></span></a><div class="col col1"><h4 class="one"><span></span>Stay in Touch</h4> <a href="https://web.archive.org/web/20100712023955/http://twitter.com/bavotasan" class="footer-twitter"><span></span>Follow me on Twitter</a><br/> <a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/feed/" class="footer-rss"><span></span>Subscribe to my RSS Feed</a> <br class="clear"/><h4 class="two"><span></span>Stay in tune</h4><div class="tweets"></div></div><div class="col col2"><h4 class="three"><span></span>Downloads</h4><ul><li><a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/downloads/feed-me-seymour-free-wordpress-theme/">Feed Me, Seymour 1.2</a></li><li><a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/downloads/magazine-basic-free-wordpress-theme/">Magazine Basic v2.6 WordPress Theme</a></li><li><a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/downloads/sliderota-jquery-plugin/">Sliderota jQuery Plugin</a></li><li><a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/downloads/full-sizebackground-image-jquery-plugin/">Full Size Background Image jQuery Plugin</a></li><li><a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/downloads/easy-overlay-modal-window-jquery-plugin/">Easy Overlay Modal Window jQuery Plugin</a></li><li><a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/downloads/snowblind-free-wordpress-theme/">Snowblind v1.1.2 Free WordPress Theme</a></li><li><a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/downloads/8-free-colorful-background-textures-for-designers/">8 Free Colorful Background Textures for Designers</a></li><li><a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/downloads/stationery-premium-wordpress-theme/">Stationery Premium WordPress Theme</a></li><li><a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/downloads/illustrious-premium-wordpress-theme/">Illustrious Premium WordPress Theme</a></li><li><a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/downloads/delete-duplicate-posts-pro-wordpress-plugin/">Delete Duplicate Posts Pro WordPress Plugin</a></li></ul></div><div class="col col3"><h4 class="four"><span></span>Tutorials</h4><ul><li><a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/tutorials/excluding-pages-from-wordpress-search/">Excluding Pages from WordPress Search</a></li><li><a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/tutorials/scrolling-back-to-top-button-jquery/">Creating a Scrolling Back to Top Button with jQuery</a></li><li><a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/tutorials/get_theme_data-developing-custom-theme-wordpress/">Using get_theme_data() when Developing a Custom Theme for WordPress</a></li><li><a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/tutorials/define-constant-php/">Defining a Constant with PHP</a></li><li><a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/tutorials/wordpress-3-activating-background-editor/">WordPress 3.0: Activating the Background Editor</a></li><li><a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/tutorials/wordpress-3-creating-multi-user-web-sites/">WordPress 3.0: Creating Multi-User Web Sites</a></li><li><a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/tutorials/wordpress-3-checking-out-the-new-menu-system/">WordPress 3.0: Checking out the New Menu System</a></li><li><a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/tutorials/how-to-upload-zip-file-using-php/">How to Upload and Unpack a Zip File using PHP</a></li><li><a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/tutorials/small-security-hole-in-wordpress-comments/">Small Security Hole in WordPress Comments</a></li><li><a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/tutorials/gradient-buttons-with-css3/">Gradient Buttons with CSS3</a></li></ul></div></div></div><div id="copyright"><div id="copyright-wrapper"> Copyright © 2010 <a href="https://web.archive.org/web/20100712023955/http://bavotasan.com/">bavotasan.com</a>. All Rights Reserved. Powered by <a href="https://web.archive.org/web/20100712023955/http://www.wordpress.org/">WordPress</a>.</div></div> <script src="https://web.archive.org/web/20100712023955js_/http://stats.wordpress.com/e-201028.js" type="text/javascript"></script> <script type="text/javascript">st_go({blog:'5317602',v:'ext',post:'1986'});var load_cmc=function(){linktracker_init(5317602,1986,2);};if(typeof addLoadEvent!='undefined')addLoadEvent(load_cmc);else load_cmc();</script> <script type="text/javascript" src="https://web.archive.org/web/20100712023955js_/http://bavotasan.com/wp-content/themes/bavotasan-2010/js/coolstuff.js"></script> <script type="text/javascript">hs.graphicsDir='https://web.archive.org/web/20100712023955/http://bavotasan.com/images/graphics/';hs.outlineType='rounded-white';hs.outlineWhileAnimating=true;hs.showCredits=false;</script> <script type="text/javascript">var gaJsHost=(("https:"==document.location.protocol)?"https://web.archive.org/web/20100712023955/https://ssl.":"https://web.archive.org/web/20100712023955/http://www.");document.write(unescape("%3Cscript src='"+gaJsHost+"google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));</script> <script type="text/javascript">try{var pageTracker=_gat._getTracker("UA-452133-5");pageTracker._trackPageview();}catch(err){}</script> </body></html>