<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>CSS Button</title>
	<atom:link href="http://cssbutton.com/feed/" rel="self" type="application/rss+xml" />
	<link>http://cssbutton.com</link>
	<description>Add style to your website</description>
	<lastBuildDate>Sat, 23 Jun 2012 08:03:30 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.4.1</generator>
		<item>
		<title>5 Simple CSS Tips</title>
		<link>http://cssbutton.com/general/5-simple-css-tips/</link>
		<comments>http://cssbutton.com/general/5-simple-css-tips/#comments</comments>
		<pubDate>Sat, 23 Jun 2012 08:02:53 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[General]]></category>
		<category><![CDATA[css overflow]]></category>
		<category><![CDATA[css text]]></category>
		<category><![CDATA[css tips]]></category>
		<category><![CDATA[rotating text with css]]></category>

		<guid isPermaLink="false">http://cssbutton.com/?p=420</guid>
		<description><![CDATA[Cascading Style Sheets, or CSS is a common application used to style web pages. It has been known to reduce bandwidth, increase uniformity among different browsers, and even add some stylistic flair to web pages. Here are a couple of tips to help you along the way. 1. CSS and Text Overflow If text has [...]]]></description>
			<content:encoded><![CDATA[<p>Cascading Style Sheets, or CSS is a common application used to style web pages. It has been known to reduce bandwidth, increase uniformity among different browsers, and even add some stylistic flair to web pages. Here are a couple of tips to help you along the way.</p>
<h2>1. CSS and Text Overflow</h2>
<p>If text has been cut off and you want to leave a visual clue to the user, use CSS to leave an ellipses to inform them that there is more to read.<br />
example code:<br />
<code><br />
text-overflow: ellipsis-word;<br />
</code></p>
<h2>2. Rotating Text With CSS</h2>
<p>By using the &#8220;transform&#8221; property in Webkit and Firefox, and the BasicImage filter in Internet Explorer, web designers have the ability to rotate text as they please. Designers can use this tool to rotate images as well making it a valuable asset for almost any design.<br />
example codes:<br />
<code><br />
-webkit-transform: rotate(-90deg);<br />
-moz-transform: rotate(-90deg);<br />
-filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);<br />
</code></p>
<h2>3. Using CSS to Center Layouts</h2>
<p>For web sites that rely heavily on large pictures, it is crucial to present the pictures correctly to prevent any problems. This code allows for proper centering, fixing problems associated with overlapping images, repeating images, or images that cut off neat the edges of the screen.<br />
example code:<br />
<code><br />
#container {margin: 0 auto; width: 30px; text-align: left;}<br />
</code></p>
<h2>4. Resetting CSS</h2>
<p>Resetting CSS gives users the ability to work uniformly across multiple browsers and platforms, fixing problems with margins, font size, headings, default line heights and other variables that often change between browsers.<br />
example code:<br />
<code><br />
{padding: 0; margin: 0;}<br />
</code></p>
<h2>5. Using Shorthand CSS</h2>
<p>Especially in larger projects, using shorthand CSS helps to keep file size small, which greatly benefits users as web pages don&#8217;t take as long to load. The biggest benefit, however, is its large boost in efficiency. When coding takes a significantly short time, you can do more work in a shorter amount of time.<br />
example code:<br />
<code><br />
#box p {margin-top: 15px; margin-right: 5px; margin-bottom: 15px; margin-left: 5px; }<br />
</code><br />
can be shortened to&#8230;<br />
<code><br />
#box p {margin:15px 5px; }<br />
</code></p>
]]></content:encoded>
			<wfw:commentRss>http://cssbutton.com/general/5-simple-css-tips/feed/</wfw:commentRss>
		<slash:comments>19</slash:comments>
		</item>
		<item>
		<title>Rounded Corners using CSS</title>
		<link>http://cssbutton.com/general/rounded-corners-using-css/</link>
		<comments>http://cssbutton.com/general/rounded-corners-using-css/#comments</comments>
		<pubDate>Sun, 15 Apr 2012 02:30:02 +0000</pubDate>
		<dc:creator>developer</dc:creator>
				<category><![CDATA[General]]></category>
		<category><![CDATA[border radius css]]></category>
		<category><![CDATA[border-radius]]></category>
		<category><![CDATA[css corners]]></category>
		<category><![CDATA[css rounded corners]]></category>
		<category><![CDATA[funky css]]></category>
		<category><![CDATA[rounded corners]]></category>

		<guid isPermaLink="false">http://cssbutton.com/?p=378</guid>
		<description><![CDATA[Ever since web pages came into being, designers have wanted to add more and more style into their creations, one of the most important being rounded corners. At first, this was achieved by using huge images to represent the buttons, forms or any other element. Later, the huge images were cut into smaller ones to [...]]]></description>
			<content:encoded><![CDATA[<p>Ever since web pages came into being, designers have wanted to add more and more style into their creations, one of the most important being rounded corners.</p>
<p><a href="http://cssbutton.com/wp-content/uploads/2012/04/rounded-corners-images.jpg"><img src="http://cssbutton.com/wp-content/uploads/2012/04/rounded-corners-images.jpg" alt="Rounded corners using images" title="Rounded corners using images" width="180" height="180" class="alignright size-full wp-image-394" /></a></p>
<p>At first, this was achieved by using huge images to represent the buttons, forms or any other element.</p>
<p>Later, the huge images were cut into smaller ones to represent the corners, positioned perfectly using CSS (see image on the right).</p>
<p>The HTML 5 spec makes it simpler than ever to create rounded corners, forgoing the need for images altogether and saving us from the horrors of funky CSS.</p>
<p>One can now simply add the <em>border-radius</em> property to any element to achieve the same effect. Here we have a simple span with the following attributes:</p>
<p><span style="margin: 20px; padding: 4px 10px; border: 1px solid black;background-color: #ffff00;"> Simple Border </span></p>
<p><code><br />
margin: 20px;<br />
padding: 4px 10px;<br />
border: 1px solid black;<br />
background-color: #ffff00;<br />
</code></p>
<p>Simply adding <code>border-radius: 6px;</code> turns it into:</p>
<p><span style="margin: 20px; padding: 4px 10px; border: 1px solid black;border-radius: 6px;background-color: #ffff00;"> Rounded Border </span></p>
<p><code><br />
margin: 20px;<br />
padding: 4px 10px;<br />
border: 1px solid black;<br />
border-radius: 6px;<br />
background-color: #ffff00;<br />
</code></p>
<p>That&#8217;s all there is to it. Almost makes it seem like a scam after the horrors we have been through in the past.</p>
<p>Let&#8217;s use it to create the featured image at the top that was originally created using a photo-editor. We&#8217;ll do it using spans:</p>
<p>Span 1<br />
<code><br />
display:block;<br />
width: 182px;<br />
height: 182px;<br />
background:-webkit-linear-gradient(#ccc, #444);<br />
background:-moz-linear-gradient(#ccc, #444);<br />
background:-o-linear-gradient(#ccc, #444);<br />
border-top:4px solid #888;<br />
border-left:4px solid #888;<br />
</code></p>
<p>Span 2 (embedded inside Span 1)<br />
<code><br />
display:block;<br />
width: 140px;<br />
height: 140px;<br />
background-color:#bb0000;<br />
border:1px solid #bb0000;<br />
border-radius:20px;<br />
position:relative;<br />
top:18px;<br />
left:18px;<br />
</code></p>
<p><span style="display:block;width: 182px;height: 182px;background:-webkit-linear-gradient(#ccc, #444);background:-moz-linear-gradient(#ccc, #444);background:-o-linear-gradient(#ccc, #444);border-top:4px solid #888;border-left:4px solid #888;"><span style="display:block;width: 140px;height: 140px;background-color:#bb0000;border:1px solid #bb0000;border-radius:20px;position:relative;top:18px;left:18px;"></span></span></p>
<p>Close enough. Now how about using this to improve your buttons?</p>
<p>Note: <em>-moz-border-radius</em> has to be added to make it compatible with Mozilla browsers. However, as of Firefox 4, just <em>border-radius</em> is supported.</p>
]]></content:encoded>
			<wfw:commentRss>http://cssbutton.com/general/rounded-corners-using-css/feed/</wfw:commentRss>
		<slash:comments>15</slash:comments>
		</item>
		<item>
		<title>Text Shadow</title>
		<link>http://cssbutton.com/general/text-shadow/</link>
		<comments>http://cssbutton.com/general/text-shadow/#comments</comments>
		<pubDate>Mon, 20 Feb 2012 12:42:48 +0000</pubDate>
		<dc:creator>developer</dc:creator>
				<category><![CDATA[General]]></category>
		<category><![CDATA[css shadow]]></category>
		<category><![CDATA[css text shadow]]></category>
		<category><![CDATA[text shadow]]></category>
		<category><![CDATA[text shadow examples]]></category>

		<guid isPermaLink="false">http://cssbutton.com/?p=307</guid>
		<description><![CDATA[Text Shadow Property We have long wanted to use 3D text effects on web pages and until now, that meant using images or tricky javascript that slowed down your website. With CSS 3, this is as simple as making text bold or colored blue. The text-shadow property allows you to turn any piece of plain [...]]]></description>
			<content:encoded><![CDATA[<h2>Text Shadow Property</h2>
<p>We have long wanted to use 3D text effects on web pages and until now, that meant using images or tricky javascript that slowed down your website.</p>
<p>With CSS 3, this is as simple as making text bold or colored blue.</p>
<p>The <em>text-shadow</em> property allows you to turn any piece of plain text into one that stands out. Simply specify the color and offsets of the shadow, and you&#8217;re done.</p>
<p>The syntax is:<br />
<code>text-shadow: &lt;color&gt; &lt;x-axis offset&gt; &lt;y-axis offset&gt; &lt;fuzz amount&gt;</code></p>
<p>which might look something like this within the stylesheet:<br />
<code>text-shadow: #000 0.01em 2px 0.1em</code></p>
<p>These offsets may be specified using the standard CSS units. We&#8217;ll stick to pixels and <em>em</em>. The fuzz amount specifies how much the shadow should be stretched.</p>
<p>&nbsp;</p>
<h2>Text Shadow Examples</h2>
<p>Adding this CSS for your paragraph tag:<br />
<code>p {color: red; text-shadow: #888 2px 2px 0.12em;}</code></p>
<p>will turn something like this:<br />
<em style="font-size: 1.6em;">That the quick brown fox jumps over the lazy dog</em><br />
into this:<br />
<span style="font-size: 1.6em;color: red; text-shadow: #888 2px 2px 0.12em;"><em>That the quick brown fox jumps over the lazy dog</em></span></p>
<p>&nbsp;</p>
<p>There are a number of creative and interesting effects you could achieve with this, such as using the same color as the background for the text and adding a shadow:<br />
<code>p {color: white; text-shadow: #888 2px 2px 0.12em;}</code><br />
<span style="font-size: 1.6em;color: white; text-shadow: #888 2px 2px 0.12em;"><em>That the quick brown fox jumps over the lazy dog</em></span></p>
<p>Be careful. The text-shadow property will only work for browsers that support CSS 3 (which is most decent browsers these days). It will be ignored by those that don&#8217;t so your text above will be invisible. Should take that into account.</p>
<p>&nbsp;</p>
<p>You could also stack multiple shadows to create a colorful montage of sorts or a flame text effect:<br />
<code>p {color: #ff6; text-shadow: #f63 0 1px 0.2em, #ff3 -2px -1px 0.12em, #f93 2px -2px 0.12em, #f63 0px -3px 0.3em;}</code></p>
<p><span style="font-size: 1.6em;color: #ff6; text-shadow: #f63 0 1px 0.2em, #ff3 -2px -1px 0.12em, #f93 2px -2px 0.12em, #f63 0px -3px 0.3em;"><em>That the quick brown fox jumps over the lazy dog</em></span></p>
<p>&nbsp;</p>
<h2>Text Shadows in Buttons</h2>
<p>Now, we could use the same effect for buttons to give them a little more character.</p>
<p><input type="submit" value="Submit" style="padding:4px 8px;font-size: 1.2em;color: green;" /></p>
<p>Simply add the &#8220;text-shadow&#8221; property to the CSS for your input box:<br />
<code>input {text-shadow: #999 0.14em 0.14em 0.2em;}</p>
<p><input type="submit" value="Submit" style="padding:4px 8px;font-size: 1.2em;color: green;  text-shadow: #999 0.14em 0.14em 0.2em;" /></p>
<p>&nbsp;</p>
<p>Although there are a lot of effects that you simply can't achieve with cascading style sheets, the <em>text-shadow</em> property is a huge leap in that direction.</p>
]]></content:encoded>
			<wfw:commentRss>http://cssbutton.com/general/text-shadow/feed/</wfw:commentRss>
		<slash:comments>19</slash:comments>
		</item>
		<item>
		<title>Content is King</title>
		<link>http://cssbutton.com/seo/content-is-king/</link>
		<comments>http://cssbutton.com/seo/content-is-king/#comments</comments>
		<pubDate>Tue, 05 Apr 2011 00:17:55 +0000</pubDate>
		<dc:creator>developer</dc:creator>
				<category><![CDATA[SEO]]></category>
		<category><![CDATA[cat throwing up]]></category>
		<category><![CDATA[content]]></category>
		<category><![CDATA[content is king]]></category>
		<category><![CDATA[funny cat video]]></category>
		<category><![CDATA[funny video]]></category>
		<category><![CDATA[google hot trends]]></category>
		<category><![CDATA[network routing]]></category>
		<category><![CDATA[optimized network routing]]></category>
		<category><![CDATA[relevant content]]></category>
		<category><![CDATA[steve perry]]></category>
		<category><![CDATA[viral videos]]></category>
		<category><![CDATA[youtube earn money]]></category>
		<category><![CDATA[youtube fame]]></category>
		<category><![CDATA[youtube viral]]></category>
		<category><![CDATA[youtube viral video]]></category>

		<guid isPermaLink="false">http://cssbutton.com/?p=275</guid>
		<description><![CDATA[Just in case you haven&#8217;t heard. If you want your website to succeed online, Content is King. Search engines rank you based on originality. Adsense will display advertisements based on your content. And users will stick with you as long as you provide interesting, relevant and original content. So don&#8217;t try to find a shortcut [...]]]></description>
			<content:encoded><![CDATA[<p>Just in case you haven&#8217;t heard. If you want your website to succeed online, <strong>Content is King</strong>. Search engines rank you based on originality. Adsense will display advertisements based on your content. And users will stick with you as long as you provide interesting, relevant and original content.</p>
<p>So don&#8217;t try to find a shortcut and copy and paste the data from other sites (especially not from Wikipedia). Write/create new content yourself that people will love.</p>
<p>Choosing the type of content is another thing you have to keep in mind. Certain topics are searched more and also provide better returns in terms of advertisements. Others may be interesting to you, but not to your would-be readers.</p>
<p>One way is to find the most searched terms and base your content around that.</p>
<p>Looking at <a href="http://www.google.com/trends/hottrends">Google&#8217;s Hot Trends</a> page, you can see that <strong>Steve Perry</strong> and other terms related to entertainment are the most searched items at the moment. You might want to write about that.</p>
<p>In the long run however, posts on technical subjects often get the most hits. Any ads that you run on such posts also tend to be worth more so a post on say <em>optimized network routing</em> could be a lot better than <em>my cat throwing up</em> (then again, a funny video of a cat throwing up could become viral on Youtube and earn you lots of money and fame).</p>
]]></content:encoded>
			<wfw:commentRss>http://cssbutton.com/seo/content-is-king/feed/</wfw:commentRss>
		<slash:comments>15</slash:comments>
		</item>
		<item>
		<title>Optimizing WordPress post titles</title>
		<link>http://cssbutton.com/seo/optimizing-wordpress-post-titles/</link>
		<comments>http://cssbutton.com/seo/optimizing-wordpress-post-titles/#comments</comments>
		<pubDate>Wed, 16 Mar 2011 16:41:45 +0000</pubDate>
		<dc:creator>developer</dc:creator>
				<category><![CDATA[SEO]]></category>
		<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[all in one seo]]></category>
		<category><![CDATA[optimize wordpress]]></category>
		<category><![CDATA[optimize wordpress titles]]></category>
		<category><![CDATA[optimizing wordpress]]></category>
		<category><![CDATA[optimizing wordpress titles]]></category>
		<category><![CDATA[search engine optimization]]></category>
		<category><![CDATA[search engine ranking]]></category>
		<category><![CDATA[wordpress digg]]></category>
		<category><![CDATA[wordpress facebook]]></category>
		<category><![CDATA[wordpress post]]></category>
		<category><![CDATA[wordpress seo]]></category>
		<category><![CDATA[wordpress titles]]></category>

		<guid isPermaLink="false">http://cssbutton.com/?p=247</guid>
		<description><![CDATA[You should be aware of the importance a site or page&#8217;s title plays in Search Engine Optimization. By default, WordPress displays the title of your blog posts in the format: Site Name &#187; Post Name This post would be displayed with the title: CSS Button &#187; Optimizing WordPress post titles. This is fine if you [...]]]></description>
			<content:encoded><![CDATA[<p>You should be aware of the importance a site or page&#8217;s title plays in Search Engine Optimization. By default, WordPress displays the title of your blog posts in the format:<br />
<code>Site Name &raquo; Post Name</code></p>
<p>This post would be displayed with the title:<br />
<code>CSS Button &raquo; Optimizing WordPress post titles</code>.</p>
<p>This is fine if you aren&#8217;t too concerned about SEO, or your site is named <em>Apple</em> and ranks top for it, but otherwise, you&#8217;ll be like the thousands of other sites out there. To set yourself apart, you&#8217;ll need to experiment and optimize WordPress a little, especially the title.</p>
<p><a href="http://wordpress.org/extend/plugins/all-in-one-seo-pack/">All in One SEO</a> is one of my favorite plugins for WordPress. It runs a number of optimizations on your site and most importantly, it switches your site&#8217;s name with your post&#8217;s name, so your title is displayed in the format:<br />
<code>Post Name | Site Name</code></p>
<p>So this post would now look like:<br />
<code>Optimizing WordPress post titles | CSS Button</code></p>
<p>This is a lot better than the WordPress default, since now, the most important keywords are in the beginning of the title. But there&#8217;s still a lot more you can do.</p>
<p>Your site&#8217;s name is usually something unique and you should already be ranked pretty highly for that (try searching for &#8220;css button&#8221;). However, what&#8217;s the point of adding that baggage to your wonderful posts? You want your post to stand out and removing the site&#8217;s name will definitely help focus on your current topic. Something pretty simple to do with the All in One SEO plugin.</p>
<p>In your admin panel, under the <code>Settings</code> menu, click <code>All in One SEO</code>. The field <code>Post Title Format:</code> should contain:<br />
<code>%post_title% | %blog_title%</code></p>
<p>Change this to just:<br />
<code>%post_title%</code></p>
<p>That should do it. Wait and see what it does to your search engine ranking. It will also help your titles on social media such as Facebook and Digg.</p>
]]></content:encoded>
			<wfw:commentRss>http://cssbutton.com/seo/optimizing-wordpress-post-titles/feed/</wfw:commentRss>
		<slash:comments>85</slash:comments>
		</item>
		<item>
		<title>Digg users and Adsense</title>
		<link>http://cssbutton.com/adsense/digg-users-and-adsense/</link>
		<comments>http://cssbutton.com/adsense/digg-users-and-adsense/#comments</comments>
		<pubDate>Mon, 07 Mar 2011 13:10:11 +0000</pubDate>
		<dc:creator>developer</dc:creator>
				<category><![CDATA[Adsense]]></category>
		<category><![CDATA[digg]]></category>
		<category><![CDATA[digg ads]]></category>
		<category><![CDATA[digg adsense]]></category>
		<category><![CDATA[digg users and adsense]]></category>
		<category><![CDATA[diggers adsense]]></category>
		<category><![CDATA[display google adsense to search engines]]></category>
		<category><![CDATA[display google adsense to search users]]></category>
		<category><![CDATA[higher ctr]]></category>
		<category><![CDATA[higher paying ads]]></category>
		<category><![CDATA[publisher ctr]]></category>
		<category><![CDATA[social media ads]]></category>
		<category><![CDATA[social media adsense]]></category>

		<guid isPermaLink="false">http://cssbutton.com/?p=159</guid>
		<description><![CDATA[It is a popular theory that users coming to your website from Digg and other social media websites, are usually blind to ads and therefore aren&#8217;t likely to click them. This is one reason why many publishers prefer to display Google Adsense (or other forms of advertisement) only to users coming in via search engines. [...]]]></description>
			<content:encoded><![CDATA[<p>It is a popular theory that users coming to your website from Digg and other social media websites, are usually blind to ads and therefore aren&#8217;t likely to click them.</p>
<p>This is one reason why many publishers prefer to display Google Adsense (or other forms of advertisement) only to users coming in via search engines.</p>
<p>Some people have argued that doing this won&#8217;t hurt your overall earnings and you may just be wasting ad space that could have earned something, even if the click-through rate (CTR) went way down.</p>
<p>However, think about it from an advertiser&#8217;s point of view. If I&#8217;m paying for ads on your website and getting only a few or no clicks in return, either there is something wrong with my ad or I need to find another website.</p>
<p>By that rationale, my preference as a publisher would be to have a higher CTR to attract higher-paying ads. This is the code I use to check for the referring website and hide my ads from Diggers:</p>
<pre>&lt;?php
# Let publish_ads be TRUE to start off with
$publish_ads = TRUE;
# Check that we have an HTTP_REFERER header
if(isset($_SERVER['HTTP_REFERER'])) {
    # See if the header contains "digg.com"
    if (strpos($_SERVER['HTTP_REFERER'], 'digg.com')) {
        # It does, so set publish_ads to FALSE
        $publish_ads = FALSE;
    }
}
?&gt;</pre>
<p>We could use a similar approach to do the opposite. i.e. display ads only to search users (users coming in from Google searches, for example).</p>
<pre>&lt;?php
# Let publish_ads be FALSE to start off with
$publish_ads = FALSE;
# Check that we have an HTTP_REFERER header
if(isset($_SERVER['HTTP_REFERER'])) {
    # See if the header contains "google.co"
    if (strpos($_SERVER['HTTP_REFERER'], 'google.co')) {
        # It does, so set publish_ads to TRUE
        $publish_ads = TRUE;
    }
}
?&gt;</pre>
<p>Now you can check for $publish_ads any place you want to display or suppress the ads:</p>
<pre>&lt;?php
# Check if $publish_ads is set to TRUE and display the adsense code if it is
if ($publish_ads == TRUE) {
?&gt;
&lt;script type="text/javascript"&gt;&lt;!--
google_ad_client = "pub-0000000000000000";
/* css, 468x60, inline-banner, created 1/1/01 */
google_ad_slot = "0000000000";
google_ad_width = 468;
google_ad_height = 60;
//--&gt;&lt;/script&gt;
&lt;script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"&gt;
&lt;/script&gt;
&lt;?php
#Now we close the if
}
?&gt;</pre>
<p>There you have it.</p>
]]></content:encoded>
			<wfw:commentRss>http://cssbutton.com/adsense/digg-users-and-adsense/feed/</wfw:commentRss>
		<slash:comments>34</slash:comments>
		</item>
		<item>
		<title>Dashes vs Underscores for SEO</title>
		<link>http://cssbutton.com/seo/dashes-vs-underscores/</link>
		<comments>http://cssbutton.com/seo/dashes-vs-underscores/#comments</comments>
		<pubDate>Thu, 03 Mar 2011 23:48:24 +0000</pubDate>
		<dc:creator>developer</dc:creator>
				<category><![CDATA[SEO]]></category>
		<category><![CDATA[dashes google]]></category>
		<category><![CDATA[dashes in urls]]></category>
		<category><![CDATA[dashes search engine optimization]]></category>
		<category><![CDATA[dashes seo]]></category>
		<category><![CDATA[dashes vs underscores]]></category>
		<category><![CDATA[search engines]]></category>
		<category><![CDATA[seo regex]]></category>
		<category><![CDATA[seo regular expressions]]></category>
		<category><![CDATA[seo tip]]></category>
		<category><![CDATA[underscore google]]></category>
		<category><![CDATA[underscore seo]]></category>
		<category><![CDATA[underscores in urls]]></category>

		<guid isPermaLink="false">http://cssbutton.com/?p=4</guid>
		<description><![CDATA[There has been a lot of debate about how Google indexes URLs and whether underscores are better for Search Engine Optimization or would dashes give better results? I have yet to find a proper conclusion to that debate, though due to another realization, I&#8217;m now inclined in favor of dashes. Here&#8217;s why: I&#8217;ve been using [...]]]></description>
			<content:encoded><![CDATA[<p>There has been a lot of debate about how Google indexes URLs and whether underscores are better for Search Engine Optimization or would dashes give better results?</p>
<p>I have yet to find a proper conclusion to that debate, though due to another realization, I&#8217;m now inclined in favor of dashes. Here&#8217;s why:</p>
<p>I&#8217;ve been using underscores for most of my filenames and URLs and have been avoiding dashes like the plague, probably because it felt like I was subtracting something and because underscores look a little neater.</p>
<p>However, if you know anything about regular expressions, you&#8217;ll know that <em>\w</em> is commonly used to match characters or words in a string. In standard regex <em>\w</em> will only match the letters a-z, A-Z and the <strong>underscore</strong> character.</p>
<p>This means that in a string such as <em>That-the-quick-brown_Fox</em>, <strong>\w*</strong> will have four matches (&#8220;That&#8221;, &#8220;the&#8221;, &#8220;quick&#8221; and &#8220;brown_Fox&#8221;) instead of five. If I was writing a script to chop up URLs and index the letters, this is what I&#8217;d get.</p>
<p>Even if Google has updated their algorithms to treat underscores and dashes similarly, chances are, most other search engines, applications and websites have not. Therefore, from now onwards, I&#8217;m sticking to the da4shes whenever I can. WordPress already sets the URL using dashes, but the same should come in handy for custom URLs and image filenames.</p>
<p>What are your thoughts? (<a href="http://www.blindfiveyearold.com/seo-dashes-or-underscores">More info</a>)</p>
]]></content:encoded>
			<wfw:commentRss>http://cssbutton.com/seo/dashes-vs-underscores/feed/</wfw:commentRss>
		<slash:comments>12</slash:comments>
		</item>
		<item>
		<title>Fun Buttons</title>
		<link>http://cssbutton.com/buttons/fun/</link>
		<comments>http://cssbutton.com/buttons/fun/#comments</comments>
		<pubDate>Wed, 02 Mar 2011 13:41:47 +0000</pubDate>
		<dc:creator>developer</dc:creator>
				<category><![CDATA[Buttons]]></category>
		<category><![CDATA[Featured]]></category>
		<category><![CDATA[css smileys]]></category>
		<category><![CDATA[fun buttons]]></category>
		<category><![CDATA[fun css buttons]]></category>
		<category><![CDATA[matrix buttons]]></category>

		<guid isPermaLink="false">http://cssbutton.com/?p=85</guid>
		<description><![CDATA[Here are some buttons bound to put a smile (or a frown) on your face. 10%bald 50%male 50%biker nightcoder Here are some CSS smileys. You&#8217;ll see them as nice images, but they&#8217;re actually just simple CSS code, converted to images by WordPress: smiley big smile wink frown anger surprise :S worried Lord of the Rings [...]]]></description>
			<content:encoded><![CDATA[<p>Here are some buttons bound to put a smile (or a frown) on your face.</p>
<p><span style="background: #fff; padding: 1px; font-family: Verdana, Geneva, Vera, Arial, Helvetica, sans-serif; font-size: x-small; font-variant: small-caps; border: 1px solid #aaa;"><span style="color: #f8f8f8; background: #6c0; padding: 0px 2px;">10%</span><span style="color: #f8f8f8; background: #886; padding: 0px 22px 0px 2px;">bald</span></span> <span style="background: #fff; padding: 1px; font-family: Verdana, Geneva, Vera, Arial, Helvetica, sans-serif; font-size: x-small; font-variant: small-caps; border: 1px solid #c60;"><span style="color: #fc3; background: #000; padding: 0px 2px;">50%</span><span style="color: #000; background: #c6c; padding: 0px 22px 0px 2px;">male</span></span> <span style="background: #fff; padding: 1px; font-family: Verdana, Geneva, Vera, Arial, Helvetica, sans-serif; font-size: x-small; font-variant: small-caps; border: 1px solid #aaa;"><span style="color: #000; background: #f93; padding: 0px 2px;">50%</span><span style="color: #f8f8f8; background: #000; padding: 0px 20px 0px 2px;">biker</span></span> <span style="background: #fff; padding: 1px; font-family: Verdana, Geneva, Vera, Arial, Helvetica, sans-serif; font-size: x-small; font-variant: small-caps; border: 1px solid #aaa;"><span style="color: #f8f8f8; background: #000; padding: 0px 2px;">night</span><span style="color: #333; background: #ccc; padding: 0px 20px 0px 2px;">coder</span></span></p>
<p>Here are some CSS smileys. You&#8217;ll see them as nice images, but they&#8217;re actually just simple CSS code, converted to images by WordPress:<br />
<span style="background: #fff; padding: 1px; font-family: Verdana, Geneva, Vera, Arial, Helvetica, sans-serif; font-size: x-small; font-variant: small-caps; border: 1px solid #aaa;"><span style="color: #000; background: #ff0; padding: 0px 2px;">  <img src='http://cssbutton.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />  </span><span style="color: #333; background: #ccc; padding: 0px 16px 0px 2px;"> smiley</span></span> <span style="background: #fff; padding: 1px; font-family: Verdana, Geneva, Vera, Arial, Helvetica, sans-serif; font-size: x-small; font-variant: small-caps; border: 1px solid #aaa;"><span style="color: #000; background: #ff0; padding: 0px 2px;">  <img src='http://cssbutton.com/wp-includes/images/smilies/icon_biggrin.gif' alt=':D' class='wp-smiley' />  </span><span style="color: #333; background: #ccc; padding: 0px 10px 0px 2px;"> big smile</span></span> <span style="background: #fff; padding: 1px; font-family: Verdana, Geneva, Vera, Arial, Helvetica, sans-serif; font-size: x-small; font-variant: small-caps; border: 1px solid #aaa;"><span style="color: #000; background: #ff0; padding: 0px 2px;">  <img src='http://cssbutton.com/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' />  </span><span style="color: #333; background: #ccc; padding: 0px 20px 0px 2px;"> wink</span></span> <span style="background: #fff; padding: 1px; font-family: Verdana, Geneva, Vera, Arial, Helvetica, sans-serif; font-size: x-small; font-variant: small-caps; border: 1px solid #aaa;"><span style="color: #000; background: #ff0; padding: 0px 2px;">  <img src='http://cssbutton.com/wp-includes/images/smilies/icon_sad.gif' alt=':(' class='wp-smiley' />  </span><span style="color: #333; background: #ccc; padding: 0px 18px 0px 2px;"> frown</span></span></p>
<p><span style="background: #fff; padding: 1px; font-family: Verdana, Geneva, Vera, Arial, Helvetica, sans-serif; font-size: x-small; font-variant: small-caps; border: 1px solid #aaa;"><span style="color: #000; background: #f00; padding: 0px 2px;">  <img src='http://cssbutton.com/wp-includes/images/smilies/icon_mad.gif' alt=':x' class='wp-smiley' />  </span><span style="color: #333; background: #ccc; padding: 0px 18px 0px 2px;"> anger</span></span> <span style="background: #fff; padding: 1px; font-family: Verdana, Geneva, Vera, Arial, Helvetica, sans-serif; font-size: x-small; font-variant: small-caps; border: 1px solid #aaa;"><span style="color: #000; background: #f0f; padding: 0px 2px;">  <img src='http://cssbutton.com/wp-includes/images/smilies/icon_surprised.gif' alt=':o' class='wp-smiley' />  </span><span style="color: #333; background: #ccc; padding: 0px 12px 0px 2px;"> surprise</span></span> <span style="background: #fff; padding: 1px; font-family: Verdana, Geneva, Vera, Arial, Helvetica, sans-serif; font-size: x-small; font-variant: small-caps; border: 1px solid #aaa;"><span style="color: #000; background: #088; padding: 0px 2px;">  :S </span><span style="color: #333; background: #ccc; padding: 0px 14px 0px 2px;"> worried</span></span></p>
<p><span style="background: #fff; padding: 1px; font-family: Verdana, Geneva, Vera, Arial, Helvetica, sans-serif; font-size: x-small; font-variant: small-caps; border: 1px solid #fc0;"><span style="color: #fc0; background: #000; padding: 0px 2px;">Lord of the Rings</span></span> <span style="background: #fff; padding: 1px; font-family: Verdana, Geneva, Vera, Arial, Helvetica, sans-serif; font-size: x-small; font-variant: small-caps; border: 1px solid #c60;"><span style="color: #fc3; background: #000; padding: 0px 2px;">orc</span><span style="color: #000; background: #fc3; padding: 0px 16px 0px 2px;">chucker</span></span> <span style="background: #fff; padding: 1px; font-family: Verdana, Geneva, Vera, Arial, Helvetica, sans-serif; font-size: x-small; font-variant: small-caps; border: 1px solid #aaa;"><span style="color: #f8f8f8; background: #000; padding: 0px 2px;">hobbit</span><span style="color: #000; background: #f93; padding: 0px 14px 0px 2px;">cruncher</span></span> <span style="background: #fff; padding: 1px; font-family: Verdana, Geneva, Vera, Arial, Helvetica, sans-serif; font-size: x-small; font-variant: small-caps; border: 1px solid #aaa;"><span style="color: #f8f8f8; background: #060; padding: 0px 2px;">orc</span><span style="color: #060; background: #ccc; padding: 0px 18px 0px 2px;">master</span></span></p>
<p><span style="background: #fff; padding: 1px; font-family: Verdana, Geneva, Vera, Arial, Helvetica, sans-serif; font-size: x-small; font-variant: small-caps; border: 1px solid #090;"><span style="color: #0f0; background: #000; padding: 0px 10px;">The Matrix</span></span> <span style="background: #fff; padding: 1px; font-family: Verdana, Geneva, Vera, Arial, Helvetica, sans-serif; font-size: x-small; font-variant: small-caps; border: 1px solid #090;"><span style="color: #0f0; background: #000; padding: 0px 24px;">neo</span></span> <span style="background: #fff; padding: 1px; font-family: Verdana, Geneva, Vera, Arial, Helvetica, sans-serif; font-size: x-small; font-variant: small-caps; border: 1px solid #090;"><span style="color: #0f0; background: #000; padding: 0px 16px;">The One</span></span></p>
<p><span style="background: #fff; padding: 1px; font-family: Verdana, Geneva, Vera, Arial, Helvetica, sans-serif; font-size: x-small; font-variant: small-caps; border: 1px solid #aaa;"><span style="color: #f8f8f8; background: #060; padding: 0px 2px;">  otnemem</span><span style="color: #060; background: #ccc; padding: 0px 16px 0px 2px;">memento</span></span></p>
]]></content:encoded>
			<wfw:commentRss>http://cssbutton.com/buttons/fun/feed/</wfw:commentRss>
		<slash:comments>19</slash:comments>
		</item>
		<item>
		<title>Country Buttons</title>
		<link>http://cssbutton.com/buttons/countries/</link>
		<comments>http://cssbutton.com/buttons/countries/#comments</comments>
		<pubDate>Wed, 02 Mar 2011 02:13:13 +0000</pubDate>
		<dc:creator>developer</dc:creator>
				<category><![CDATA[Buttons]]></category>
		<category><![CDATA[Featured]]></category>
		<category><![CDATA[country buttons]]></category>
		<category><![CDATA[country flags]]></category>
		<category><![CDATA[css button]]></category>
		<category><![CDATA[css buttons]]></category>

		<guid isPermaLink="false">http://cssbutton.com/?p=34</guid>
		<description><![CDATA[These are buttons that can be used as mini flags to represent your specific country or region. greece Mexico brazil india argargentina singapore albania netherlands pakpakistan south africa UnitedStates]]></description>
			<content:encoded><![CDATA[<p>These are buttons that can be used as mini flags to represent your specific country or region.</p>
<p><span style="background: #fff; padding: 1px; font-family: Verdana, Geneva, Vera, Arial, Helvetica, sans-serif; font-size: x-small; font-variant: small-caps; border: 1px solid #00c;"><span style="color: #fff; background: #00c; padding: 0px 18px;">greece</span></span></p>
<p><span style="background: #fff; padding: 1px; font-family: Geneva, Vera, Arial, Helvetica, sans-serif; font-size: x-small; font-variant: small-caps; border: 1px solid #390;"><span style="color: #fff; background: #390; padding: 0px 3px 0px 3px;">Me</span><span style="color: #390; background: #fff; padding: 0px 3px 0px 3px;">xi</span><span style="color: #fff; background: #c00; padding: 0px 24px 0px 3px;">co</span></span></p>
<p><span style="background: #fff; padding: 1px; font-family: Verdana, Geneva, Vera, Arial, Helvetica, sans-serif; font-size: x-small; font-variant: small-caps; border: 1px solid #080;"><span style="color: #ff0; background: #080; padding: 0px 18px;">brazil</span></span></p>
<p><span style="background: #fff; padding: 1px; font-family: Verdana, Geneva, Vera, Arial, Helvetica, sans-serif; font-size: x-small; font-variant: small-caps; border: 1px solid #f90;"><span style="color: #080; background: #f90; padding: 0px 20px;">india</span></span></p>
<p><span style="background: #fff; padding: 1px; font-family: Verdana, Geneva, Vera, Arial, Helvetica, sans-serif; font-size: 1.4em; font-variant: small-caps; border: 1px solid #39c;"><span style="color: #fff; background: #fff; padding: 0px 2px 0px 4px;">arg</span><span style="color: #fff; background: #39c; padding: 0px 4px 0px 2px;">argentina</span></span></p>
<p><span style="background: #fff; padding: 1px; font-family: Verdana, Geneva, Vera, Arial, Helvetica, sans-serif; font-size: x-small; font-variant: small-caps; border: 1px solid #c00;"><span style="color: #c00; background: #fff; padding: 0px 2px;">singa</span><span style="color: #fff; background: #c00; padding: 0px 20px 0px 2px;">pore</span></span></p>
<p><span style="background: #fff; padding: 1px; font-family: Verdana, Geneva, Vera, Arial, Helvetica, sans-serif; font-size: x-small; font-variant: small-caps; border: 1px solid #c00;"><span style="color: #c00; background: #000; padding: 0px 2px;">   al</span><span style="color: #000; background: #c00; padding: 0px 20px 0px 2px;">bania</span></span></p>
<p><span style="background: #fff; padding: 1px; font-family: Verdana, Geneva, Vera, Arial, Helvetica, sans-serif; font-size: x-small; font-variant: small-caps; border: 1px solid #f90;"><span style="color: #fff; background: #f90; padding: 0px 8px;">netherlands</span></span></p>
<p><span style="background: #fff; padding: 1px; font-family: Verdana, Geneva, Vera, Arial, Helvetica, sans-serif; font-size: x-small; font-variant: small-caps; border: 1px solid #080;"><span style="color: #fff; background: #fff; padding: 0px 2px;">pak</span><span style="color: #fff; background: #080; padding: 0px 14px 0px 2px;">pakistan</span></span></p>
<p><span style="background: #fff; padding: 1px; font-family: Verdana, Geneva, Vera, Arial, Helvetica, sans-serif; font-size: x-small; font-variant: small-caps; border: 1px solid #080;"><span style="color: #ff0; background: #080; padding: 0px 6px;">south africa</span></span></p>
<p><span style="background: #fff; padding: 1px; font-family: Geneva, Vera, Arial, Helvetica, sans-serif; font-size: x-small; font-variant: small-caps; border: 1px solid #999999;"><span style="color: #FFFFFF; background: #0000FF; padding: 0px 3px 0px 3px;">United</span><span style="color: #FFFFFF; background: #FF0000; padding: 0px 18px 0px 3px;">States</span></span></p>
]]></content:encoded>
			<wfw:commentRss>http://cssbutton.com/buttons/countries/feed/</wfw:commentRss>
		<slash:comments>21</slash:comments>
		</item>
		<item>
		<title>Welcome to CSS Button</title>
		<link>http://cssbutton.com/general/welcome-to-css-button/</link>
		<comments>http://cssbutton.com/general/welcome-to-css-button/#comments</comments>
		<pubDate>Wed, 02 Mar 2011 01:34:52 +0000</pubDate>
		<dc:creator>developer</dc:creator>
				<category><![CDATA[General]]></category>
		<category><![CDATA[css button]]></category>
		<category><![CDATA[css methods]]></category>
		<category><![CDATA[css techniques]]></category>
		<category><![CDATA[css tips]]></category>
		<category><![CDATA[tips and techniques]]></category>

		<guid isPermaLink="false">http://cssbutton.com/?p=7</guid>
		<description><![CDATA[Welcome to the new CSS Button site. In addition to providing tips and techniques related to Cascading Style Sheets, this site will showcase useful methods and code that would be invaluable to any webmaster, developer or designer. You will still find loads of buttons that you may use on your own website for free. Sites [...]]]></description>
			<content:encoded><![CDATA[<p>Welcome to the new CSS Button site. In addition to providing tips and techniques related to Cascading Style Sheets, this site will showcase useful methods and code that would be invaluable to any webmaster, developer or designer.</p>
<p>You will still find loads of buttons that you may use on your own website for free. Sites offering free buttons are already quite plentiful on the Internet, but what makes CSS buttons special is their speed, simplicity and elegance. We have buttons made entirely out of CSS/HTML that load instantly and you&#8217;ll also find buttons enhanced with CSS.</p>
<p><span style="background: #fff; padding: 1px; font-family: Geneva, Vera, Arial, Helvetica, sans-serif; font-size: 1.8em; font-variant: small-caps; border: 1px solid #c00;"><span style="color: #c00; background: #000; padding: 0px 2px 0px 9px;">CSS</span><span style="color: #000; background: #c00; padding: 0px 9px 0px 2px;">Button</span></span></p>
<p>Visit the <a href="http://cssbutton.com/forms/">CSS forms</a> page for ways to improve on the plain HTML forms for your site.</p>
<p><input type="submit" value="Submit" style="border: 1px solid #006; background: #ccf;" /><br />
<input type="submit" value="Submit" style="border: none; background: url('/images/buttons/white-1.png') no-repeat top left; padding: 4px 26px;" /><br />
<input type="submit" value="TheMatrix" style="border: none; background: url('/images/buttons/red-1.png') no-repeat top left; padding: 4px 24px;" /><br />
<input type="submit" value="Dangerous" style="border: none; background: url('/images/buttons/yellow-1.png') no-repeat top left; padding: 4px 24px;" /><br />
<input type="submit" value=" Cipher " style="border: none; background: url('/images/buttons/blue-1.png') no-repeat top left; padding: 4px 24px;" /><br />
<input type="submit" value="Darkness" style="color: white; border: none; background: url('/images/buttons/black-3.png') no-repeat top left; padding: 4px 24px;" /><br />
<input type="submit" value="Do it" style="border: none; background: url('/images/buttons/lblue.png') no-repeat top left; padding: 4px 24px;" /></p>
<p>CSS-based buttons offer numerous advantages:<br />
They&#8217;re smaller and hence quicker to load<br />
They can be modified much easier than an image can<br />
They are more easily accessible by text-based browsers and web crawlers, giving your site a wider audience and better SEO.<br />
Here are a couple of examples of buttons created or enhanced using plain CSS and HTML. I decided to use inline CSS to make it simpler to use the buttons and cater for different types of buttons on a single page. This does increase the size and you can make the code even smaller by including the CSS in a separate .css file.</p>
<p><span style="background: #fff; padding: 1px; font-family: Geneva, Vera, Arial, Helvetica, sans-serif; font-size: x-small; font-variant: small-caps; border: 1px solid #aaa;"><span style="color: #f8f8f8; background: #f60; padding: 0px 2px;">xml</span><span style="color: #000; background: #fff; padding: 0px 12px 0px 2px;">atom feed</span></span></p>
<p><input type="submit" value="Cyanide" style="border: none; background: url('/images/buttons/white-1.png') no-repeat top left; padding: 4px 26px;" /></p>
<p>Browse the collection that we have on this site or create your own and simply paste the code into your page, wherever you want it. It&#8217;s as simple as that. I would also appreciate any comments on these.<br />
(Note: The buttons on this site are tested to work correctly with Mozilla Firefox and Opera browsers. Users with IE or other browsers may experience varying results)</p>
]]></content:encoded>
			<wfw:commentRss>http://cssbutton.com/general/welcome-to-css-button/feed/</wfw:commentRss>
		<slash:comments>11</slash:comments>
		</item>
	</channel>
</rss>
