ブログ用見出しテンプレート[真鍮ボタン]

(2016/02/01)

HOME > CSS でかっこいい h タグをつくろう > [フラット系] > [フラット系2] > [アクセント1] > [アクセント2] > [立体系] > [インパクト系] > [ペーパー系] > [フィルム系] > [ふきだし系] > [真鍮ボタン] > [真鍮ボタン2] > [セロファンリボン 1] > [セロファンリボン 2] > [ピン留めリボン]

　コード量が無駄に多くなっています。
　楽天ブログをお使いの方は文字数制限にご注意ください。

真鍮ボタンつきヘッダ

　h タグの枠を立体にし、真鍮のような影付きボタンを配置しました。

しろいろ

<h3 style="width:80%;height:30px;padding:10px;background:#fff;box-shadow:rgba(110, 110, 110, 0.2) 0px 0px 6px 3px inset;border-radius:6px;color:#888;font-size:16pt;padding-left:50px;margin-bottom:0;">ここにテキストを入力します</h3><div style="width:15px;height:15px;background: #c9bd6b;box-shadow:inset -2px -2px 3px 1px #7e742d,inset -1px -1px 2px #837727, 0 0 1px #b6a73f;border-radius:45px;margin-top:-32px;margin-left:18px;margin-bottom:20px;"></div>

はいあおいろ

<h3 style="width:80%;height:30px;padding:10px;background:#c0c6c9;box-shadow:rgba(110, 110, 110, 0.2) 0px 0px 6px 3px inset;border-radius:6px;color:#0d0015;font-size:16pt;padding-left:50px;margin-bottom:0;">ここにテキストを入力します</h3><div style="width:15px;height:15px;background: #c9bd6b;box-shadow:inset -2px -2px 3px 1px #7e742d,inset -1px -1px 2px #837727, 0 0 1px #b6a73f;border-radius:45px;margin-top:-32px;margin-left:18px;margin-bottom:20px;"></div>

ひそくいろ

<h3 style="width:80%;height:30px;padding:10px;background:#abced8;box-shadow:rgba(110, 110, 110, 0.2) 0px 0px 6px 3px inset;border-radius:6px;color:#888;font-size:16pt;padding-left:50px;margin-bottom:0;">ここにテキストを入力します</h3><div style="width:15px;height:15px;background: #c9bd6b;box-shadow:inset -2px -2px 3px 1px #7e742d,inset -1px -1px 2px #837727, 0 0 1px #b6a73f;border-radius:45px;margin-top:-32px;margin-left:18px;margin-bottom:20px;"></div>

かりやすいろ

<h3 style="width:80%;height:30px;padding:10px;background:#f5e56b;box-shadow:rgba(110, 110, 110, 0.2) 0px 0px 6px 3px inset;border-radius:6px;color:#ec6800;font-size:16pt;padding-left:50px;margin-bottom:0;">ここにテキストを入力します</h3><div style="width:15px;height:15px;background: #c9bd6b;box-shadow:inset -2px -2px 3px 1px #7e742d,inset -1px -1px 2px #837727, 0 0 1px #b6a73f;border-radius:45px;margin-top:-32px;margin-left:18px;margin-bottom:20px;"></div>

こうじいろ

<h3 style="width:80%;height:30px;padding:10px;background:#f6ad49;box-shadow:rgba(110, 110, 110, 0.2) 0px 0px 6px 3px inset;border-radius:6px;color:#ea5506;font-size:16pt;padding-left:50px;margin-bottom:0;">ここにテキストを入力します</h3><div style="width:15px;height:15px;background: #c9bd6b;box-shadow:inset -2px -2px 3px 1px #7e742d,inset -1px -1px 2px #837727, 0 0 1px #b6a73f;border-radius:45px;margin-top:-32px;margin-left:18px;margin-bottom:20px;"></div>

こうばいいろ

<h3 style="width:80%;height:30px;padding:10px;background:#f2a0a1;box-shadow:rgba(110, 110, 110, 0.2) 0px 0px 6px 3px inset;border-radius:6px;color:#c9171e;font-size:16pt;padding-left:50px;margin-bottom:0;">ここにテキストを入力します</h3><div style="width:15px;height:15px;background: #c9bd6b;box-shadow:inset -2px -2px 3px 1px #7e742d,inset -1px -1px 2px #837727, 0 0 1px #b6a73f;border-radius:45px;margin-top:-32px;margin-left:18px;margin-bottom:20px;"></div>

あまいろ

<h3 style="width:80%;height:30px;padding:10px;background:#d6c6af;box-shadow:rgba(110, 110, 110, 0.2) 0px 0px 6px 3px inset;border-radius:6px;color:#888;font-size:16pt;padding-left:50px;margin-bottom:0;">ここにテキストを入力します</h3><div style="width:15px;height:15px;background: #c9bd6b;box-shadow:inset -2px -2px 3px 1px #7e742d,inset -1px -1px 2px #837727, 0 0 1px #b6a73f;border-radius:45px;margin-top:-32px;margin-left:18px;margin-bottom:20px;"></div>

やなぎちゃいろ

<h3 style="width:80%;height:30px;padding:10px;background:#a1a46d;box-shadow:rgba(110, 110, 110, 0.2) 0px 0px 6px 3px inset;border-radius:6px;color:#dccb18;font-size:16pt;padding-left:50px;margin-bottom:0;">ここにテキストを入力します</h3><div style="width:15px;height:15px;background: #c9bd6b;box-shadow:inset -2px -2px 3px 1px #7e742d,inset -1px -1px 2px #837727, 0 0 1px #b6a73f;border-radius:45px;margin-top:-32px;margin-left:18px;margin-bottom:20px;"></div>

わかみどりいろ

<h3 style="width:80%;height:30px;padding:10px;background:#98d98e;box-shadow:rgba(110, 110, 110, 0.2) 0px 0px 6px 3px inset;border-radius:6px;color:#69821b;font-size:16pt;padding-left:50px;margin-bottom:0;">ここにテキストを入力します</h3><div style="width:15px;height:15px;background: #c9bd6b;box-shadow:inset -2px -2px 3px 1px #7e742d,inset -1px -1px 2px #837727, 0 0 1px #b6a73f;border-radius:45px;margin-top:-32px;margin-left:18px;margin-bottom:20px;"></div>

うすぶどういろ

<h3 style="width:80%;height:30px;padding:10px;background:#c0a2c7;box-shadow:rgba(110, 110, 110, 0.2) 0px 0px 6px 3px inset;border-radius:6px;color:#65318e;font-size:16pt;padding-left:50px;margin-bottom:0;">ここにテキストを入力します</h3><div style="width:15px;height:15px;background: #c9bd6b;box-shadow:inset -2px -2px 3px 1px #7e742d,inset -1px -1px 2px #837727, 0 0 1px #b6a73f;border-radius:45px;margin-top:-32px;margin-left:18px;margin-bottom:20px;"></div>

真鍮ボタンつきヘッダ（外枠つき）

　真鍮ボタンつきヘッダに外枠をつけたものです。

しろいろ

<h3 style="width:80%;height:30px;padding:10px;background:#fff;box-shadow:rgba(110, 110, 110, 0.2) 0px 0px 6px 3px inset;border:1px solid #888;border-radius:6px;color:#888;font-size:16pt;padding-left:50px;margin-bottom:0;">ここにテキストを入力します</h3><div style="width:15px;height:15px;background: #c9bd6b;box-shadow:inset -2px -2px 3px 1px #7e742d,inset -1px -1px 2px #837727, 0 0 1px #b6a73f;border-radius:45px;margin-top:-32px;margin-left:18px;margin-bottom:20px;"></div>

はいあおいろ

<h3 style="width:80%;height:30px;padding:10px;background:#c0c6c9;box-shadow:rgba(110, 110, 110, 0.2) 0px 0px 6px 3px inset;border:1px solid #888;border-radius:6px;color:#0d0015;font-size:16pt;padding-left:50px;margin-bottom:0;">ここにテキストを入力します</h3><div style="width:15px;height:15px;background: #c9bd6b;box-shadow:inset -2px -2px 3px 1px #7e742d,inset -1px -1px 2px #837727, 0 0 1px #b6a73f;border-radius:45px;margin-top:-32px;margin-left:18px;margin-bottom:20px;"></div>

ひそくいろ

<h3 style="width:80%;height:30px;padding:10px;background:#abced8;box-shadow:rgba(110, 110, 110, 0.2) 0px 0px 6px 3px inset;border:1px solid #888;border-radius:6px;color:#888;font-size:16pt;padding-left:50px;margin-bottom:0;">ここにテキストを入力します</h3><div style="width:15px;height:15px;background: #c9bd6b;box-shadow:inset -2px -2px 3px 1px #7e742d,inset -1px -1px 2px #837727, 0 0 1px #b6a73f;border-radius:45px;margin-top:-32px;margin-left:18px;margin-bottom:20px;"></div>

かりやすいろ

<h3 style="width:80%;height:30px;padding:10px;background:#f5e56b;box-shadow:rgba(110, 110, 110, 0.2) 0px 0px 6px 3px inset;border:1px solid #888;border-radius:6px;color:#ec6800;font-size:16pt;padding-left:50px;margin-bottom:0;">ここにテキストを入力します</h3><div style="width:15px;height:15px;background: #c9bd6b;box-shadow:inset -2px -2px 3px 1px #7e742d,inset -1px -1px 2px #837727, 0 0 1px #b6a73f;border-radius:45px;margin-top:-32px;margin-left:18px;margin-bottom:20px;"></div>

こうじいろ

<h3 style="width:80%;height:30px;padding:10px;background:#f6ad49;box-shadow:rgba(110, 110, 110, 0.2) 0px 0px 6px 3px inset;border:1px solid #888;border-radius:6px;color:#ea5506;font-size:16pt;padding-left:50px;margin-bottom:0;">ここにテキストを入力します</h3><div style="width:15px;height:15px;background: #c9bd6b;box-shadow:inset -2px -2px 3px 1px #7e742d,inset -1px -1px 2px #837727, 0 0 1px #b6a73f;border-radius:45px;margin-top:-32px;margin-left:18px;margin-bottom:20px;"></div>

こうばいいろ

<h3 style="width:80%;height:30px;padding:10px;background:#f2a0a1;box-shadow:rgba(110, 110, 110, 0.2) 0px 0px 6px 3px inset;border:1px solid #888;border-radius:6px;color:#c9171e;font-size:16pt;padding-left:50px;margin-bottom:0;">ここにテキストを入力します</h3><div style="width:15px;height:15px;background: #c9bd6b;box-shadow:inset -2px -2px 3px 1px #7e742d,inset -1px -1px 2px #837727, 0 0 1px #b6a73f;border-radius:45px;margin-top:-32px;margin-left:18px;margin-bottom:20px;"></div>

あまいろ

<h3 style="width:80%;height:30px;padding:10px;background:#d6c6af;box-shadow:rgba(110, 110, 110, 0.2) 0px 0px 6px 3px inset;border:1px solid #888;border-radius:6px;color:#888;font-size:16pt;padding-left:50px;margin-bottom:0;">ここにテキストを入力します</h3><div style="width:15px;height:15px;background: #c9bd6b;box-shadow:inset -2px -2px 3px 1px #7e742d,inset -1px -1px 2px #837727, 0 0 1px #b6a73f;border-radius:45px;margin-top:-32px;margin-left:18px;margin-bottom:20px;"></div>

やなぎちゃいろ

<h3 style="width:80%;height:30px;padding:10px;background:#a1a46d;box-shadow:rgba(110, 110, 110, 0.2) 0px 0px 6px 3px inset;border:1px solid #888;border-radius:6px;color:#dccb18;font-size:16pt;padding-left:50px;margin-bottom:0;">ここにテキストを入力します</h3><div style="width:15px;height:15px;background: #c9bd6b;box-shadow:inset -2px -2px 3px 1px #7e742d,inset -1px -1px 2px #837727, 0 0 1px #b6a73f;border-radius:45px;margin-top:-32px;margin-left:18px;margin-bottom:20px;"></div>

わかみどりいろ

<h3 style="width:80%;height:30px;padding:10px;background:#98d98e;box-shadow:rgba(110, 110, 110, 0.2) 0px 0px 6px 3px inset;border:1px solid #888;border-radius:6px;color:#69821b;font-size:16pt;padding-left:50px;margin-bottom:0;">ここにテキストを入力します</h3><div style="width:15px;height:15px;background: #c9bd6b;box-shadow:inset -2px -2px 3px 1px #7e742d,inset -1px -1px 2px #837727, 0 0 1px #b6a73f;border-radius:45px;margin-top:-32px;margin-left:18px;margin-bottom:20px;"></div>

うすぶどういろ

<h3 style="width:80%;height:30px;padding:10px;background:#c0a2c7;box-shadow:rgba(110, 110, 110, 0.2) 0px 0px 6px 3px inset;border:1px solid #888;border-radius:6px;color:#65318e;font-size:16pt;padding-left:50px;margin-bottom:0;">ここにテキストを入力します</h3><div style="width:15px;height:15px;background: #c9bd6b;box-shadow:inset -2px -2px 3px 1px #7e742d,inset -1px -1px 2px #837727, 0 0 1px #b6a73f;border-radius:45px;margin-top:-32px;margin-left:18px;margin-bottom:20px;"></div>

真鍮ボタンつきヘッダ（二重外枠つき）

　真鍮ボタンつきヘッダに二重の外枠をつけたものです。
　金属製の枠を取り付けたような高級感がありますので、デザインを重視する方やファッション系の記事はもちろんのこと、どんな記事にもお使いいただけます。

しろいろ

<h3 style="width:80%;height:30px;padding:10px;background:#fff;box-shadow:rgba(110, 110, 110, 0.2) 0px 0px 6px 3px inset;border:3px double #888;border-radius:6px;color:#888;font-size:16pt;padding-left:50px;margin-bottom:0;">ここにテキストを入力します</h3><div style="width:15px;height:15px;background: #c9bd6b;box-shadow:inset -2px -2px 3px 1px #7e742d,inset -1px -1px 2px #837727, 0 0 1px #b6a73f;border-radius:45px;margin-top:-32px;margin-left:18px;margin-bottom:20px;"></div>

はいあおいろ

<h3 style="width:80%;height:30px;padding:10px;background:#c0c6c9;box-shadow:rgba(110, 110, 110, 0.2) 0px 0px 6px 3px inset;border:3px double #888;border-radius:6px;color:#0d0015;font-size:16pt;padding-left:50px;margin-bottom:0;">ここにテキストを入力します</h3><div style="width:15px;height:15px;background: #c9bd6b;box-shadow:inset -2px -2px 3px 1px #7e742d,inset -1px -1px 2px #837727, 0 0 1px #b6a73f;border-radius:45px;margin-top:-32px;margin-left:18px;margin-bottom:20px;"></div>

ひそくいろ

<h3 style="width:80%;height:30px;padding:10px;background:#abced8;box-shadow:rgba(110, 110, 110, 0.2) 0px 0px 6px 3px inset;border:3px double #888;border-radius:6px;color:#888;font-size:16pt;padding-left:50px;margin-bottom:0;">ここにテキストを入力します</h3><div style="width:15px;height:15px;background: #c9bd6b;box-shadow:inset -2px -2px 3px 1px #7e742d,inset -1px -1px 2px #837727, 0 0 1px #b6a73f;border-radius:45px;margin-top:-32px;margin-left:18px;margin-bottom:20px;"></div>

かりやすいろ

<h3 style="width:80%;height:30px;padding:10px;background:#f5e56b;box-shadow:rgba(110, 110, 110, 0.2) 0px 0px 6px 3px inset;border:3px double #888;border-radius:6px;color:#ec6800;font-size:16pt;padding-left:50px;margin-bottom:0;">ここにテキストを入力します</h3><div style="width:15px;height:15px;background: #c9bd6b;box-shadow:inset -2px -2px 3px 1px #7e742d,inset -1px -1px 2px #837727, 0 0 1px #b6a73f;border-radius:45px;margin-top:-32px;margin-left:18px;margin-bottom:20px;"></div>

こうじいろ

<h3 style="width:80%;height:30px;padding:10px;background:#f6ad49;box-shadow:rgba(110, 110, 110, 0.2) 0px 0px 6px 3px inset;border:3px double #888;border-radius:6px;color:#ea5506;font-size:16pt;padding-left:50px;margin-bottom:0;">ここにテキストを入力します</h3><div style="width:15px;height:15px;background: #c9bd6b;box-shadow:inset -2px -2px 3px 1px #7e742d,inset -1px -1px 2px #837727, 0 0 1px #b6a73f;border-radius:45px;margin-top:-32px;margin-left:18px;margin-bottom:20px;"></div>

こうばいいろ

<h3 style="width:80%;height:30px;padding:10px;background:#f2a0a1;box-shadow:rgba(110, 110, 110, 0.2) 0px 0px 6px 3px inset;border:3px double #888;border-radius:6px;color:#c9171e;font-size:16pt;padding-left:50px;margin-bottom:0;">ここにテキストを入力します</h3><div style="width:15px;height:15px;background: #c9bd6b;box-shadow:inset -2px -2px 3px 1px #7e742d,inset -1px -1px 2px #837727, 0 0 1px #b6a73f;border-radius:45px;margin-top:-32px;margin-left:18px;margin-bottom:20px;"></div>

あまいろ

<h3 style="width:80%;height:30px;padding:10px;background:#d6c6af;box-shadow:rgba(110, 110, 110, 0.2) 0px 0px 6px 3px inset;border:3px double #888;border-radius:6px;color:#888;font-size:16pt;padding-left:50px;margin-bottom:0;">ここにテキストを入力します</h3><div style="width:15px;height:15px;background: #c9bd6b;box-shadow:inset -2px -2px 3px 1px #7e742d,inset -1px -1px 2px #837727, 0 0 1px #b6a73f;border-radius:45px;margin-top:-32px;margin-left:18px;margin-bottom:20px;"></div>

やなぎちゃいろ

<h3 style="width:80%;height:30px;padding:10px;background:#a1a46d;box-shadow:rgba(110, 110, 110, 0.2) 0px 0px 6px 3px inset;border:3px double #888;border-radius:6px;color:#dccb18;font-size:16pt;padding-left:50px;margin-bottom:0;">ここにテキストを入力します</h3><div style="width:15px;height:15px;background: #c9bd6b;box-shadow:inset -2px -2px 3px 1px #7e742d,inset -1px -1px 2px #837727, 0 0 1px #b6a73f;border-radius:45px;margin-top:-32px;margin-left:18px;margin-bottom:20px;"></div>

わかみどりいろ

<h3 style="width:80%;height:30px;padding:10px;background:#98d98e;box-shadow:rgba(110, 110, 110, 0.2) 0px 0px 6px 3px inset;border:3px double #888;border-radius:6px;color:#69821b;font-size:16pt;padding-left:50px;margin-bottom:0;">ここにテキストを入力します</h3><div style="width:15px;height:15px;background: #c9bd6b;box-shadow:inset -2px -2px 3px 1px #7e742d,inset -1px -1px 2px #837727, 0 0 1px #b6a73f;border-radius:45px;margin-top:-32px;margin-left:18px;margin-bottom:20px;"></div>

うすぶどういろ

<h3 style="width:80%;height:30px;padding:10px;background:#c0a2c7;box-shadow:rgba(110, 110, 110, 0.2) 0px 0px 6px 3px inset;border:3px double #888;border-radius:6px;color:#65318e;font-size:16pt;padding-left:50px;margin-bottom:0;">ここにテキストを入力します</h3><div style="width:15px;height:15px;background: #c9bd6b;box-shadow:inset -2px -2px 3px 1px #7e742d,inset -1px -1px 2px #837727, 0 0 1px #b6a73f;border-radius:45px;margin-top:-32px;margin-left:18px;margin-bottom:20px;"></div>

色をイロイロ変えてみたい方は、こちらのサイトがおすすめです。
WEB色見本原色大辞典 [外部リンク]