ボタン No.001

テキスト要素

リンクボタンを作成したので、展示します。
ご自由に使用して構いません。改変も自由です。

このボタンのデザインは、字色が白、背景色が透明になっているので、バックに濃い色が設定されているページで使用すると効果的です。バックが白の場合は、字色を変更してご使用することをお勧めします。

また、字体に「Monotype Corsiva」を使用して、おしゃれな感じにしています。この字体を読み込める環境でないと明朝体で表示されるので、使用する場合はご注意ください。

以下に、HTMLとCSSを記載するので、改変の参考にしてください。

【HTMLの記述】

<div class="back_red"><h1 class="title">ボタン No.001</h1>
<div class="w1024"><div class="flex_around">

<p class="button_001"><a href="#" title="ホーム">Home</a></p>
<p class="button_001"><a href="#" title="トップ">Top</a></p>
<p class="button_001"><a href="#" title="プロフィール">Profile</a></p>
<p class="button_001"><a href="#" title="はじめに">Introduction</a></p>
<p class="button_001"><a href="#" title="サイト概要">About</a></p>
<p class="button_001"><a href="#" title="利用規約">Terms</a></p>
<p class="button_001"><a href="#" title="プライバシーポリシー">Privacy</a></p>
<p class="button_001"><a href="#" title="サイトマップ">Sitemap</a></p>
<p class="button_001"><a href="#" title="アクセス">Access</a></p>
<p class="button_001"><a href="#" title="お知らせ">Notice</a></p>

<p class="button_001"><a href="#" title="ご案内">Information</a></p>
<p class="button_001"><a href="#" title="ガイド">Guide</a></p>
<p class="button_001"><a href="#" title="ナビゲーション">Navigation</a></p>
<p class="button_001"><a href="#" title="メニュー">Menu</a></p>
<p class="button_001"><a href="#" title="カテゴリ">Category</a></p>

<p class="button_001"><a href="#" title="コンテンツ">Contents</a></p>
<p class="button_001"><a href="#" title="主要記事">Main</a></p>
<p class="button_001"><a href="#" title="次へ">Next</a></p>
<p class="button_001"><a href="#" title="前へ">Above</a></p>

<p class="button_001"><a href="#" title="商品ページ">Article</a></p>
<p class="button_001"><a href="#" title="お申し込み">Offer</a></p>
<p class="button_001"><a href="#" title="ご注文">Order</a></p>
<p class="button_001"><a href="#" title="ご連絡">Contact</a></p>

<p class="button_001"><a href="#" title="会員登録">Registry</a></p>
<p class="button_001"><a href="#" title="ログイン">Login</a></p>
<p class="button_001"><a href="#" title="会員ページ">Member</a></p>
<p class="button_001"><a href="#" title="メールマガジン">Magazine</a></p>
<p class="button_001"><a href="#" title="無料レポート">Report</a></p>

<p class="button_001"><a href="#" title="関連サイト">Relation</a></p>
<p class="button_001"><a href="#" title="リンクサイト">Link</a></p>
<p class="button_001"><a href="#" title="ポータルページ">Portal Page</a></p>
<p class="button_001"><a href="#" title="オフィシャルページ">Official Page</a></p>
<p class="button_001"><a href="#" title="ポートフォリオページ">Portfolio</a></p>

</div></div></div>

【CSSの記述】

.back_red {background-color:#ffaaaa;}
.title {background-color:#333333; color:#ffffff; font-size:32px; text-align:center; margin:20px 0 40px 0;}
.w1024 {width:100%; max-width:1024px; margin:0 auto;}
.flex_around {width:100%; display:flex; flex-wrap:wrap; justify-content:space-around;}

.button_001 {font-family:'Monotype Corsiva',serif; font-size:24px; text-shadow:4px 4px 4px #333333; margin:20px 10px;}
.button_001 a {color:#ffffff; padding:6px 20px; text-decoration:none;}
.button_001 a:hover {color:#ffff33;}

コメント

タイトルとURLをコピーしました