These will stretch to fit any amount of text – even if it gets so large it becomes a banner.
They use just one image – and have a ‘web 2.0′ sheen.
They have an icon (which can be positioned to the left or right)
They have a hover state – the text and the background colour can change.

Shrink-wrapped buttons
Shrink-wrapped buttons

Shrink-wrapped buttons


..and a final one!

Here’s the code:

a.btn,
a.btn:visited {
float:left;
background-color: #80c64c;
background-image: url(/images/blog/btn.png);
color:#fff;
text-decoration:none;
font-size:0.95em;
clear:both;
margin:0 0 12px 6px;
line-height: 1.1;
letter-spacing: 0;
}
a:hover.btn {
color:#ff0;
}
a.btn * {
display:block;
font-weight:normal;
}
a.btn b {
margin-left:6px;
padding:2px 0 0 0;
background: transparent url(/images/blog/btn.png) right top;
}
a.btn b b {
margin:0 0 0 -6px;
padding:0 0 0 12px;
background-position: left bottom;
}
a.btn b b b {
padding:6px 12px 12px 0px;
margin: 0;
background-position: right bottom;
text-indent: -3px;
}

a.btn_grn,
a.btn_grn:visited {
background-color: #80c64c;
}
a.btn_grn b b b b {
padding: 0 28px 0 0;
background-image: url(/images/blog/arrows.png);
background-position: right center;
background-repeat: no-repeat;
}

<a class="btn" href="#nogo">
<b><b><b>Shrink-wrapped buttons</b></b></b>
</a>

<a class="btn_grn btn" href="#nogo">
<b><b><b><b>Shrink-wrapped buttons</b></b></b></b>
</a>

<a class="btn_grn2 btn" href="#nogo">
<b><b><b><b>Shrink-wrapped buttons</b></b></b></b>
</a>
<a class="btn_brwn btn" href="#nogo">
<b><b><b>..and a final one!</b></b></b>
</a>

This is an adaption to the work done by:

schillmania.com – More Rounded Corners with CSS
456bereastreet.com – Bulletproof shrinkwrapping buttons

Here’s a link to the pre-sliced Photoshop image: mac_browser_sml.psd

Add some extra padding to the bottom and a reflection to the bottom of the browser frame to get that web 2.0 look.

Here’s the CSS

#browserWrap {
float: left;
margin: 0 12px 12px 0;
}

#browserWrap .browsershot {
width: 306px;
background: url(images/mac_browser_bot.gif) no-repeat bottom left;
margin: 0;
padding: 0 0 6px 0;
float: left;
position: relative;
}

#browserWrap .browsershot a {
width: 305px;
background: transparent url(images/mac_browser_top.gif) no-repeat top left;
margin: 0;
padding: 20px 0 0 1px;
float: left;
display: block;

}
#browserWrap .browsershotscroll {
width: 306px;
background: transparent url(images/mac_browser_scroll.gif) repeat-y right;
margin: 0;
padding: 0 0 0 10;
float: left;
z-index: 2;
}
#browserWrap .browsershotscrolltop {
background: transparent url(images/mac_browser_scrolltop.gif) no-repeat top right;
margin: 0;
width: 100%;
z-index: 3;
}
#browserWrap .browsershotscrollbot {
width: 6px;
height: 15px;
background: transparent url(images/mac_browser_scrollbot.gif) no-repeat bottom right;
margin: 0;
position: absolute;
bottom: 6px;
right: 0;
z-index: 3;
}
#browserWrap img {
border: 0;
}

The mark-up

<div id="browserWrap">
<div class="browsershot">
<div class="browsershotscroll"><div class="browsershotscrolltop">
<a href="/log/"><img src="/images/blog/website_thumbnail.jpg" width="300" height="263" alt="Eklog" /></a>
<div class="browsershotscrollbot"></div></div></div></div> <!– /.browsershot –>
</div> <!– /#browserWrap –>

Version 2.1 is available at google code – here’s the link: code.google.com/p/swfobject/

Main Advantages:

• It’s more optimized and flexible than any other Flash Player embed method around.
• It uses unobtrusive JavaScript.
• It offers a standards-based, accessible way to serve flash.
• It allows you to avoid click-to-activate mechanisms to activate active content in Internet Explorer 6/7 and Opera 9+.

There are two publishing methods: static publishing method & dynamic publishing method.

Both methods allow you to use standards-based markup and a way to serve alternative content (including a option to install / upgrade your flash) if flash isn’t supported.

The main advantage of the static publishing method is: If you have the Flash plug-in installed, but have JavaScript disabled or a use a browser that doesn’t support JavaScript, you will still be able to see your Flash content.

Usually there’s a good reason why JavaScript isn’t supported. W3C schools Browser Stats states 95% of users have JavaScript On. So unless you specifically want to cater for devices like Sony PSP (which has very poor JavaScript support) the dynamic publishing method is recommended.

The advantages of the dynamic publishing method are: It avoids click-to-activate mechanisms to activate active content in Internet Explorer 6/7 and Opera 9+.

Using parameters:

There aren’t a lot of examples of using parameters. Here’s an example for making movies transparent. This is often necessary to have DHTML elements appear ABOVE the flash movies (as well as content / imagery below.)

<script type="text/javascript">
// <![CDATA[
	var flashvars = false;
    var params = {
		quality: "high",
		wmode: "transparent",
		scale: "noscale"
	};
	var attributes = {};
	swfobject.embedSWF("/flash/movie.swf", "flashcontentID",
"550", "400", "6.0.0", "false", flashvars,
params, attributes);
// ]]>
</script>

Bugs:

There appears to be an unresolved issue where the flash movie doesn’t load in Internet Explorer 7. You can find more details at the flashcomguru.com forum

Adobe state only a very small number of IE7 users are affected but many users believe the issue is more widespread.

Setting the flash version to "0" does solve the issue. But if the user doesn’t have flash the alternative content is not served. Adobe.com’s player census state about 98% of users have flash player version 7 and above installed. (Only 80% use version 9 so this solution would not be satisfactory).

<!--[if !IE 7]><!-->
    <script type="text/javascript">
    // <![CDATA[
	swfobject.embedSWF("/flash/movie.swf", "flashcontentID",
"550", "400", "6.0.0", "false", flashvars,
params, attributes);
    // ]]>
    </script>
<!--<![endif]-->

<!--[if IE 7]><!-->
    <script type="text/javascript">
    // <![CDATA[
	swfobject.embedSWF("/flash/movie.swf", "flashcontentID",
"550", "400", "0", "false", flashvars,
params, attributes);
        // ]]>
    </script>
<!--<![endif]-->

Alternatively, use the alternative content to embed the movie and then use a src=”image.gif” with details describing what’s happening / what steps to take.

Note: Not sure how using using expressinstall.swf affects this issue.

• XHTML Strict 1.0 W3C valid markup.
• Semantically correct markup – e.g. use <ul> unordered lists for any list of items.
• Common identifiers should be used based on potential HTML classes and hCard microformat.

Cross Browser Valid:

• Identical (and fully functional) user experience across browsers. (note: browser differences for font anti-aliasing are expected) – Internet Explorer 6, 7 & 8 + Safari 2 & 3 + Firefox 2 & 3 + Google Chrome + Opera 9 for Windows XP | Firefox 2 & 3 + Safari 2 & 3 for Mac OSX.

CSS Styling:

• CSS styles must be completely unobtrusive with no inline styles.
• Elements should not be positioned absolutely unless necessary – All main element blocks should normally be positioned relatively so if new content is added the existing elements would automatically reposition in the flow. Also wherever font-size is increased the layout integrity remains.

Client side scripting:

• All JavaScript should be unobtrusive and loaded / called through external files – using IDs or Classes as hooks, no inline JavaScript such as onclick functions.
• The existence of Functions and Objects should be tested for before use where practical.
• The jQuery library is preferred.

Accessibility:

• JavaScript features are unobtrusive and the dynamic features degrade well with scripting disabled: All content should be accessible with JavaScript disabled including hidden or asynchronously included content. (e.g. Content asynchronously included with AJAX is replaced with a standard link for screen readers or clients with no javaScript.)
• Content should be accessible via keyboard for users without mouse control.
• Using meaningful ALT text for information images.
• Links should have descriptive hyperlink text and titles warning of link actions.
• Text colours have adequate contrast for colour blind/challenged users.
• Avoid the use of frames, which are difficult for special browsers to interpret.
• Keyboard shortcut to main content available.
• Labels assigned to form items and forms have accessible design.

Usability:

• Links, buttons & other dynamic elements have hover states, focus states and active states.
• AJAX calls include history recording for forward / back buttons and bookmarking / links.
• Navigation menu will only activate when the user intends to use it – i.e. user slows the cursor down over a link. The menu is not activated if the cursor is dragged across the menu. (through a delay or hover intent script)
• Search field has suggestion. This is greyed out until the user starts typing.

SEO:

• Site is fully available without JavaScript.
• Semantic mark-up with consistent URL, breadcrumb and content titles. Where titles are graphical, <h1> image replacement techniques are used.
• CSS coding allows the content to appear before the top and left navigation in the source code. Spiders will arrive at the header then the <h1> tags at the top of the content. They spider the content first then the navigation and footer last – enhancing SEO.

Optimization:

• Repeating background image layers used for reoccurring design patterns.
• Dynamic graphical elements preloaded and highlighted using CSS sprites technique.
• AJAX used to pull in optional content where file size may degrade performance.

Accessibility issues that are not priority 1 issues and do not fail the legal Accessibility guideline requirements:
- Text input fields with a default value – Text fields may have a default value – but only for users with JavaScript enabled (96% of users). This is so that a ‘dynamic’ default value can be added that disappears when the user click in the box. This is a superior solution but not 100% accessible to people with disabilities.
- Adjacent links are separated by white space – CSS is used to separate some adjacent links. This can make it difficult for some older assistive technologies (readers for the blind). This is done to improve performance and ease of future updates. People should update their older assistive technologies.
- Web colour scheme may not be tested against protanope, deuteranope, and tritanope colour-blindness.
- Form fieldsets do not have legends. These are normally catered for by titles, or left out when the design requires.

If you add the following meta tag:
<meta http-equiv="imagetoolbar" content="no">
Then you won't see the following for IE image hover:

Skype Toolbar

If you add the following meta tag:
<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE" />
Then ONLY phone numbers within the following tags will be highlighted:
<!-- sphoneid telnr="+15551234456" fileas="John Smith" -->(555) 1234 456<!-- sphoneid -->

Useful meta tag link: More information on meta tags