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 –>

Contents:

• Design tips
• Photoshop/Image software tips
• Coding tips
• coding examples
• Structure
• Styling for a variety of email clients
• Rendering bug fixing
• Email delivery software
• Testing
• Examples of newsletters: Evans, Miss Selfridge, BHS, House of Fraiser, ASOS, M&S

Here’s a download link: HTML Email development

• 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.

Testing and evaluating DHTML menu trees.

Each menu included in the list (below) has it’s own testing area. They’ve been tested for full functionality within a working ‘mini site’ and adapted to demonstrate whether it’s possible to open nested levels and display the current location without altering the body tag.

Here’s the list of menus with a link to the test and a link to the original sites:

Displaying the ‘current location’ is vital for clear site navigation. This feature is not usually included with the original menu source code. In order to test whether it is possible to adapt the menus to include this feature each menu has been set up – where possible – to indicate the ‘current location’ and automatically open the tree at that level.

Links below include the local test area and the original URL providing the source code.

Only free-of-charge menu systems are included in this evaluation.

Overview of evaluation criteria:

• Is it accessible? Driveable by keyboard only?
• How separate is the content, presentation, and behaviour.
• Does it degrade well without JavaScript or CSS?
• How easy is it to indicate the ‘current location’ of the page selected?
• Does it opens and displays current status for an included page – [e.g. HTML: main.php?page=page1.] i.e. cannot use body tags or code in section of page?
• When clicking on the parent item / title of the section do the nested list items open – i.e. not just clicking on the graphic which can cause confusion?
• Is it xhtml 1.0 strict valid?

In order to keep the nested levels visible at a specific location I have used one of two types of server-side functions:

<?php
$theuri = $_SERVER['REQUEST_URI']; ?>
<?php
if ( ($theuri =="/s01sub1a01.php") or ($theuri ==
"/tests/menu13/section1pages/s01sub1a02.php"))
echo " class=\"liOpen\"";
else echo " class=\"liClosed\""; ?>

or

<?php
if ( ($thisPage=="s01sub1b01")
or ($thisPage=="s01sub1b02") or ($thisPage=="s01sub1b03") )
echo " rel=\"open\""; ?>

A better method to use is demonstrated below.
This has not been used in these tests because of the need for
modRewrite using the RewriteEngine:

$lines = split("\n", $menu);
foreach ($lines as $line) {
$current = false;
preg_match('/href="([^" mce_href="([^"]+)"/', $line, $url);
if (substr($_SERVER["REQUEST_URI"], 0, 5) == substr($url[1], 0, 5)) {
$line = str_replace('<a h', '<
a id="current" h', $line); }
echo $line."\n";
}

[Full source code available at: http://photomatt.net/ ]

or

<?php
$menu =
file_get_contents("/inc/menu.htm");
$menu = preg_replace("|<li><
a xhref=\"" .
basename($_SERVER['PHP_SELF']) . "\">(.*),/code><!--[^-->]+>
</li>|U","<
li class=\"current\">$1</li>", $menu);
echo $menu;
?>