JavaScript + Ajax 実践サンプル集 - CSS3でAqua/Vista風のボタンを作成する

CSS3でAqua/Vista風のボタンを作成する

説明補足説明コード分割コード関連書籍コメント投稿

このサンプルは、CSS3のスタイルシートを利用してAquaとVista風のボタンを表示します。CSS3のスタイルを利用することにより、イメージを一切使用しないでアクア風／ビスタ風のボタンが作成できます。このサンプルは、Firefox, Safari, Google Chromeに最適化されています。 IEには最適化されていません。

このサンプルを編集して試してみる

.aqua
{
  display: block;
  line-height: 32px;
  color: #fff;
  font-family: arial, sans-serif;
  font-size: 14px;
  font-weight: bold;
  float: left;
  text-decoration: none;
  padding: 0 10px;
  text-shadow: -1px -1px 6px rgba(0, 0, 0, 0.6), -1px -1px 1px #000;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -moz-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5);
  background-image: -webkit-gradient(linear, left top, left bottom, 
from(rgba(255, 255, 255, 0.8)), 
to(rgba(255, 255, 255, 0)), 
color-stop(30%, rgba(255, 255, 255, 0.4)), color-stop(50%,  rgba(255, 255, 255, 0.2)));
  background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.8), 
rgba(255, 255, 255, 0.4) 30%, rgba(255, 255, 255, 0.2) 50%, 
rgba(255, 255, 255, 0));
}

.vista
{
  display: block;
  line-height: 36px;
  color: #fff;
  font-family: arial, sans-serif;
  font-size: 14px;
  font-weight: bold;
  float: left;
  text-decoration: none;
  padding: 0 13px 0 14px;
  text-shadow: -1px -1px 6px rgba(0, 0, 0, 0.6), -1px -1px 1px #000;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  -moz-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5);
  background-image: -webkit-gradient(linear, left top, left bottom, 
from(rgba(255, 255, 255, 0.8)), to(rgba(255, 255, 255, 0)), 
color-stop(48%, rgba(255, 255, 255, 0.5)), color-stop(50%,  rgba(255, 255, 255, 0)));
  background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.5) 48%, 
rgba(255, 255, 255, 0) 50%, 
rgba(255, 255, 255, 0));
}

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>CSS3 Buttons</title>
  <link rel="stylesheet" type="text/css" href="DhtmlAdvanced/css3Buttons/style.css" />
</head>
<body>
  <div id="wrapper">
    <div id="info">
      <h2>Aqua buttons</h2>
      <a class="black1 aqua" href="#x">Black Aqua</a> 
      <a class="red1 aqua" href="#x">Red Aqua</a> 
      <a class="blue1 aqua" href="#x">Blue Aqua</a> <a class="green1 aqua" href="#x">Green Aqua</a>
      <br />
      <br />
      <br />
      <h2>Vista buttons</h2>
      <a class="black2 vista" href="#x">Black Vista</a> 
      <a class="red2 vista" href="#x">Red Vista</a> 
      <a class="blue2 vista" href="#x">Blue Vista</a> <a class="green2 vista" href="#x">Green Vista</a>
      <br />
      <br />
      <br />
      <p class="info" style="float: right; margin: 10px;">
        source: <a href="http://cssplay.co.uk">cssplay.co.uk</a></p>
      <br />
    </div>
  </div>
</body>
</html>

CSS部HEAD部BODY部

ボックス内のスタイルシート(CSS)を外部ファイル(*.css)、またはHTMLドキュメントの<HEAD>セクションの<style>タグ内にコピー＆ペーストしてください。

            
/* ================================================================ 
This copyright notice must be untouched at all times.
Copyright (c) 2005-2010 stu nicholls - cssplay.co.uk 
All rights reserved.
=================================================================== */

.black1
{
  background: #000;
  margin-left: 10px;
  display: inline;
  border: 4px solid #000;
}
.red1
{
  background: #c00;
  margin-left: 10px;
  display: inline;
  border: 4px solid #c00;
}
.blue1
{
  background: #00a;
  margin-left: 10px;
  display: inline;
  border: 4px solid #00a;
}
.green1
{
  background: #080;
  margin-left: 10px;
  display: inline;
  border: 4px solid #080;
}


.aqua
{
  display: block;
  line-height: 32px;
  color: #fff;
  font-family: arial, sans-serif;
  font-size: 14px;
  font-weight: bold;
  float: left;
  text-decoration: none;
  padding: 0 10px;
  text-shadow: -1px -1px 6px rgba(0, 0, 0, 0.6), -1px -1px 1px #000;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -moz-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5);
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.8)), to(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.4)), color-stop(50%,  rgba(255, 255, 255, 0.2)));
  background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4) 30%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0));
}

.black2
{
  background: #000;
  margin-left: 10px;
  display: inline;
  border: 1px solid #000;
}
.red2
{
  background: #c00;
  margin-left: 10px;
  display: inline;
  border: 1px solid #c00;
}
.blue2
{
  background: #00a;
  margin-left: 10px;
  display: inline;
  border: 1px solid #00a;
}
.green2
{
  background: #080;
  margin-left: 10px;
  display: inline;
  border: 1px solid #080;
}

.vista
{
  display: block;
  line-height: 36px;
  color: #fff;
  font-family: arial, sans-serif;
  font-size: 14px;
  font-weight: bold;
  float: left;
  text-decoration: none;
  padding: 0 13px 0 14px;
  text-shadow: -1px -1px 6px rgba(0, 0, 0, 0.6), -1px -1px 1px #000;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  -moz-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5);
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.8)), to(rgba(255, 255, 255, 0)), color-stop(48%, rgba(255, 255, 255, 0.5)), color-stop(50%,  rgba(255, 255, 255, 0)));
  background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.5) 48%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
}

ボックス内のコードをHTMLドキュメントの<HEAD>セクションにコピー＆ペーストしてください。

            
<link rel="stylesheet" type="text/css" href="DhtmlAdvanced/css3Buttons/style.css" />

ボックス内のコードをHTMLドキュメントの<BODY>セクションにコピー＆ペーストしてください。

            
<div id="wrapper">
  <div id="info">
    <h2>Aqua buttons</h2>
    <a class="black1 aqua" href="#x">Black Aqua</a> 
    <a class="red1 aqua" href="#x">Red Aqua</a> 
    <a class="blue1 aqua" href="#x">Blue Aqua</a> <a class="green1 aqua" href="#x">Green Aqua</a>
    <br />
    <br />
    <br />
    <h2>Vista buttons</h2>
    <a class="black2 vista" href="#x">Black Vista</a> 
    <a class="red2 vista" href="#x">Red Vista</a> 
    <a class="blue2 vista" href="#x">Blue Vista</a> <a class="green2 vista" href="#x">Green Vista</a>
    <br />
    <br />
    <br />
    <p class="info" style="float: right; margin: 10px;">
      source: <a href="http://cssplay.co.uk">cssplay.co.uk</a></p>
    <br />
  </div>
</div>

コメント・提案の投稿！

名前
メール
件名
本文

JavaScript + Ajax 実践サンプル集 (1496本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!

CSS3でAqua/Vista風のボタンを作成する

JavaScript + Ajax 実践サンプル集 (1496本以上) ◇編集して実行可能◇

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!

CSS3でAqua/Vista風のボタンを作成する

JavaScript + Ajax 実践サンプル集 (1496本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!