<?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>Narga &#187; CSS</title>
	<atom:link href="http://www.narga.net/category/web-dev/css/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.narga.net</link>
	<description>Narga - Ideas and inspiration in my opinion!</description>
	<lastBuildDate>Wed, 18 Jan 2012 20:20:37 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=</generator>
	<atom:link rel='hub' href='http://www.narga.net/?pushpress=hub'/>
		<item>
		<title>Beautiful and Simple CSS Button Styling</title>
		<link>http://www.narga.net/beautiful-and-simple-css-button-styling/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=beautiful-and-simple-css-button-styling</link>
		<comments>http://www.narga.net/beautiful-and-simple-css-button-styling/#comments</comments>
		<pubDate>Tue, 06 Oct 2009 16:16:07 +0000</pubDate>
		<dc:creator>Narga</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[CSS recipes]]></category>

		<guid isPermaLink="false">http://www.narga.net/?p=1008</guid>
		<description><![CDATA[You feel the buttons are not beautiful in form and display on different browsers. CSS buttons are much more efficient than image-based buttons because they're entirely text-based. If you are looking for a simple and effective way of creating dynamic CSS buttons with cross browser compatibility, these tutorials are for you.

Below, you will find the CSS Tutorials and Techniques to make CSS Button Styling]]></description>
			<content:encoded><![CDATA[<p>You feel the buttons are not beautiful in form and display on different browsers. CSS buttons are much more efficient than image-based buttons because they're entirely text-based. If you are looking for a simple and effective way of creating dynamic CSS buttons with cross browser compatibility, these tutorials are for you.</p>
<p>Below, you will find the CSS Tutorials and Techniques to make CSS Button Styling<br />
<span id="more-1008"></span></p>
<h3>1. <a rel="nofollow" href="http://particletree.com/features/rediscovering-the-button-element/" title="Particletree CSS Button Style" >Particletree CSS Button Style</a></h3>
<div id="attachment_1009" class="wp-caption aligncenter" style="width: 344px"><img class="size-full wp-image-1009" src="http://www.narga.net/wp-content/uploads/2009/10/particletree.jpg" alt="ParticleTree CSS Button" width="334" height="46" /><p class="wp-caption-text">ParticleTree CSS Button</p></div>
<p>Simple, but effective. Now, what I love about this way of handling buttons is that I can use the 1000 icon arsenal from <a href="http://www.narga.net/famfamfam-silk-icons-the-great-mini-icons-for-web-developer/" title="FAMFAMFAM" >FAMFAMFAM</a> or <a href="http://www.narga.net/free-farm-fresh-web-icons/" title="Farm-Fresh" >Farm-Fresh</a> to illustrate a ridiculous number of ideas and actions without having to generate something from Photoshop every single time I need something new. All Particletree CSS Button Style should look same everywhere and cross browser.</p>
<h3>2. <a rel="nofollow" href="http://monc.se/kitchen/95/scalable-buttons-update" >Scalable CSS Buttons Using PNG and Background Colors</a></h3>
<div id="attachment_1011" class="wp-caption aligncenter" style="width: 232px"><img class="size-full wp-image-1011" src="http://www.narga.net/wp-content/uploads/2009/10/Scalable-CSS-Buttons-Using-PNG-and-Background-Colors.png" alt="Scalable CSS Buttons Using PNG and Background Colors" width="222" height="182" /><p class="wp-caption-text">Scalable CSS Buttons Using PNG and Background Colors</p></div>
<p>In that article he will use PNG images for adding shades and corners to the buttons. PNG’s are great because you have 256 levels of alpha transparency compared to only 1 using GIF.</p>
<h3>3. <a rel="nofollow" href="http://woork.blogspot.com/2008/06/beautiful-css-buttons-with-icon-set.html" >Woork CSS buttons with icon set</a></h3>
<div id="attachment_1012" class="wp-caption aligncenter" style="width: 430px"><img class="size-full wp-image-1012" src="http://www.narga.net/wp-content/uploads/2009/10/Woork-CSS-buttons-with-icon-set.gif" alt="Woork CSS buttons with icon set" width="420" height="150" /><p class="wp-caption-text">Woork CSS buttons with icon set</p></div>
<p>Do you like simple and clean design? Take a look at this collection of buttons for your website. This tutorial illustrates how to design nice clean buttons using some lines of HTML, CSS code and proxal icon set.</p>
<h3>4. <a rel="nofollow" href="http://www.sohtanaka.com/web-design/liquid-color-adjustable-css-buttons/" >Liquid &amp; Color Adjustable CSS Buttons</a></h3>
<p>When working on a large site with multiple buttons, it í quite tedious to make all the buttons in Photoshop. Making future adjustments on the verbiage and colors can be also be time-consuming.</p>
<div id="attachment_1014" class="wp-caption aligncenter" style="width: 303px"><img class="size-full wp-image-1014" src="http://www.narga.net/wp-content/uploads/2009/10/Liquid-Color-Adjustable-CSS-Buttons.jpg" alt="Liquid &amp; Color Adjustable CSS Buttons" width="293" height="252" /><p class="wp-caption-text">Liquid &amp; Color Adjustable CSS Buttons</p></div>
<p>By having dynamic buttons, this scenario is much easier to handle, and by having liquid and color adjustable buttons with CSS, we are able to change the verbiage and colors in a flash.</p>
<h3>5. <a rel="nofollow" href="http://www.filamentgroup.com/lab/update_styling_the_button_element_with_css_sliding_doors_now_with_image_spr/" >Styling the Button Element with CSS Sliding Doors</a></h3>
<div id="attachment_1015" class="wp-caption aligncenter" style="width: 293px"><img class="size-full wp-image-1015" src="http://www.narga.net/wp-content/uploads/2009/10/Styling-the-Button-Element-with-CSS-Sliding-Doors.jpg" alt="Styling the Button Element with CSS Sliding Doors" width="283" height="67" /><p class="wp-caption-text">Styling the Button Element with CSS Sliding Doors</p></div>
<p>A great and thoroughly in-depth tutorial, that covers everything from the buttons html and css all the way to using the sliding door technique and cross browser compatibility.</p>
<h3>6. <a rel="nofollow" href="http://www.dynamicdrive.com/style/csslibrary/item/bold_css_buttons/" >Bold CSS Buttons</a></h3>
<div id="attachment_1018" class="wp-caption aligncenter" style="width: 239px"><img class="size-full wp-image-1018" src="http://www.narga.net/wp-content/uploads/2009/10/Dynamic-Drive-CSS-Library-Bold-CSS-Buttons.png" alt="Dynamic Drive CSS Library- Bold CSS Buttons" width="229" height="165" /><p class="wp-caption-text">Dynamic Drive CSS Library- Bold CSS Buttons</p></div>
<p>These big, bold CSS buttons is constructed using a rounded edge button image sliced into two pieces, then put back together using CSS. The button text style reacts on the "hover" state.</p>
<h3>7. <a rel="nofollow" href="http://www.halmatferello.com/journal/pure-css-buttons/" >Pure CSS Buttons</a></h3>
<div id="attachment_1019" class="wp-caption aligncenter" style="width: 241px"><img class="size-full wp-image-1019" src="http://www.narga.net/wp-content/uploads/2009/10/Pure-CSS-Buttons.jpg" alt="Pure CSS Buttons" width="231" height="202" /><p class="wp-caption-text">Pure CSS Buttons</p></div>
<p>This is simple and effective way to have buttons that scale (width-wise) without any weird browser-specific CSS (apart from IE6/7) or JavaScript implementations. Just using pure CSS goodness.<br />
And since we should care about the user, the buttons also offer feedback – hence different images for :hover,:active CSS events.</p>
<h3>8. <a rel="nofollow" href="http://learnola.com/2008/10/28/css-tutorial-roll-over-button/" >Roll Over Button</a></h3>
<div id="attachment_1020" class="wp-caption aligncenter" style="width: 196px"><img class="size-full wp-image-1020" src="http://www.narga.net/wp-content/uploads/2009/10/Roll-Over-Button.jpg" alt="Roll Over Button" width="186" height="79" /><p class="wp-caption-text">Roll Over Button</p></div>
<p>In this XHTML CSS tutorial you’ll learn how to create a button for a web page using Photoshop, XHTML and CSS. More specifically, you’ll learn how to create a button whose hover state image is preloaded. The advantage to this technique is that upon hovering over your button, the user won’t have to wait for its hover state image to appear; there’ll be no ‘graphic-less’ moment while the image loads, all without a single line of JavaScript.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.narga.net/beautiful-and-simple-css-button-styling/feed/</wfw:commentRss>
		<slash:comments>11</slash:comments>
		</item>
	</channel>
</rss>

