Snippet-Editor.com

CSS3で書いて、スクリーンショットを取って、ボタンにする

<!DOCTYPE html>
<html dir="ltr" lang="ja">
<head>
<meta charset="utf-8" />
<title>Safari CSS3 Button</title>
<style>
body { font-size: 12px; font-family: "Lucida Grande", sans-serif; -webkit-text-stroke: 1px transparent; background: #aaa; padding: 20px; margin: 0; }
ul { clear: both; float: left; width: 100%; padding: 0; margin: 0; }
ul li { clear: both; float: left; list-style-position: outside; list-style-type: none; background: #fff; padding: 2px; margin: 0 3px; }

a:link,
a:visited { color: #fff; font-weight: bold; text-decoration: none; text-align: center; line-height: 1.1; background: #1f5c99; float: left; -webkit-border-radius: 5px; padding: 1px; margin: 0; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); }
a:link span,
a:visited span { text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.4); float: left; border: 1px solid hsla(0, 0%, 100%, 0.33); border-top-color: hsla(0, 0%, 100%, 0.66); border-bottom: none; -webkit-border-radius: 4px; padding: 0.2em 1.4em 0.3em; margin: 0;}

a:hover,
a.hover,
a.active { -webkit-box-shadow: none; }
a.hover,
a.active { cursor: default; }

a.link:link span,
a.link:visited span { background: -webkit-gradient(linear, left top, left bottom, from( hsla(0, 0%, 100%, 0.4)), color-stop(0.5, hsla(0, 0%, 100%, 0.2)), color-stop(0.5, hsla(0, 0%, 100%, 0.1)), to( hsla(0, 0%, 100%, 0.2))); }
a.hover span,
a.link:hover span { background: -webkit-gradient(linear, left top, left bottom, from( hsla(0, 0%, 100%, 0.5)), color-stop(0.5, hsla(0, 0%, 100%, 0.25)), color-stop(0.5, hsla(0, 0%, 100%, 0.25)), to( hsla(0, 0%, 100%, 0.2))); }
a.active,
a.link:active { background: -webkit-gradient(linear, left top, left bottom, from( hsl(0, 0%, 10%)), color-stop(0.25, hsl(0, 0%, 20%)), to( hsl(0, 0%, 33%))); }
a.active span,
a.link:active span { text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); background: none; border-color: transparent; }
</style>
</head>
<body>
<ul>
    <li><a href="#null" class="link"><span>Download</span></a></li>
    <li><a href="#null" class="hover"><span>Download</span></a></li>
    <li><a href="#null" class="active"><span>Download</span></a></li>
</ul>
</body>
</html>

CSS3を待たないでも使える伸び縮みするボタン

p.button { clear: both; font-weight: bold; text-align: center; }
p.button a,
p.button span { display: inline-block; line-height: 43px; height: 45px; background: url(../images/button.png) no-repeat; }
p.button a { text-decoration: none; padding-left: 25px; }
p.button span { background-position: right top; padding-right: 45px; }
p.button a:hover { background-position: left bottom; }
p.button a:hover span { background-position: right bottom; }

プラグインなしでiPhoneとiPadにサイトを最適化する簡単な方法

<!DOCTYPE html>
<meta name="viewport" content="width=1024">
<style>
@media only screen and (max-device-width: 480px) {
body { font-size: 1.6em; }
div.body { width: 1024px; }
div.aside { display: none; }
div.article { float: none; width: auto; }
}
</style>
<body>
<div class="body"></div>
</body>
</html>