リンクボタンのデザインを展示します。
自由に使用して構いません。改変も自由です。
このボタンのデザインは、border-radiusを使用して四角を丸め、HOVER時には全体が透明になるよう、OPACITYを0.7に設定しています。
また、字体に「Monotype Corsiva」を使用して、おしゃれな感じにしています。この字体を読み込める環境でないと明朝体で表示されるので、使用する場合はご注意ください。
以下に、HTMLとCSSを記載するので、改変の参考にしてください。
【HTMLの記述】
<div class="back_white"><h2 class="title">ボタン No.002</h2>
<div class="w1024"><div class="flex_around">
<p class="button_002"><a href="#" title="ホーム">Home</a></p>
<p class="button_002"><a href="#" title="トップ">Top</a></p>
<p class="button_002"><a href="#" title="プロフィール">Profile</a></p>
<p class="button_002"><a href="#" title="はじめに">Introduction</a></p>
<p class="button_002"><a href="#" title="サイト概要">About</a></p>
<p class="button_002"><a href="#" title="利用規約">Terms</a></p>
<p class="button_002"><a href="#" title="プライバシーポリシー">Privacy</a></p>
<p class="button_002"><a href="#" title="サイトマップ">Sitemap</a></p>
<p class="button_002"><a href="#" title="アクセス">Access</a></p>
<p class="button_002"><a href="#" title="お知らせ">Notice</a></p>
<p class="button_002"><a href="#" title="ご案内">Information</a></p>
<p class="button_002"><a href="#" title="ガイド">Guide</a></p>
<p class="button_002"><a href="#" title="ナビゲーション">Navigation</a></p>
<p class="button_002"><a href="#" title="メニュー">Menu</a></p>
<p class="button_002"><a href="#" title="カテゴリ">Category</a></p>
<p class="button_002"><a href="#" title="コンテンツ">Contents</a></p>
<p class="button_002"><a href="#" title="主要記事">Main</a></p>
<p class="button_002"><a href="#" title="次へ">Next</a></p>
<p class="button_002"><a href="#" title="前へ">Above</a></p>
<p class="button_002"><a href="#" title="商品ページ">Article</a></p>
<p class="button_002"><a href="#" title="お申し込み">Offer</a></p>
<p class="button_002"><a href="#" title="ご注文">Order</a></p>
<p class="button_002"><a href="#" title="ご連絡">Contact</a></p>
<p class="button_002"><a href="#" title="会員登録">Registry</a></p>
<p class="button_002"><a href="#" title="ログイン">Login</a></p>
<p class="button_002"><a href="#" title="会員ページ">Member</a></p>
<p class="button_002"><a href="#" title="メールマガジン">Magazine</a></p>
<p class="button_002"><a href="#" title="無料レポート">Report</a></p>
<p class="button_002"><a href="#" title="関連サイト">Relation</a></p>
<p class="button_002"><a href="#" title="リンクサイト">Link</a></p>
<p class="button_002"><a href="#" title="ポータルページ">Portal Page</a></p>
<p class="button_002"><a href="#" title="オフィシャルページ">Official Page</a></p>
<p class="button_002"><a href="#" title="ポートフォリオページ">Portfolio</a></p>
</div></div></div>
【CSSの記述】
.back_white {background-color:#ffffff;}
.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_002 {font-family:'Monotype Corsiva',serif; font-size:24px; margin:20px 10px;}
.button_002 a {background-color:#333399; color:#ffffff; padding:6px 20px; text-decoration:none; border-radius:18px;}
.button_002 a:hover {opacity:0.7; border-radius:18px;}
コメント