リンクボタンのデザインを展示します。
自由に使用して構いません。改変も自由です。
このボタンのデザインは、border-radiusを使用して四角を丸め、HOVER時には全体が透明になるよう、OPACITYを0.4に設定しています。
また、背景色は、linear-gradientを使用し、上から下に向けて#333399から#ffffffにグラデーションをかけています。
以下に、HTMLとCSSを記載するので、改変の参考にしてください。
【HTMLの記述】
<div class="back_white"><h2 class="title">ボタン No.003</h2>
<div class="w1024"><div class="flex_around">
<p class="button_003"><a href="#" title="ホーム">ホーム</a></p>
<p class="button_003"><a href="#" title="トップ">トップ</a></p>
<p class="button_003"><a href="#" title="プロフィール">プロフィール</a></p>
<p class="button_003"><a href="#" title="はじめに">はじめに</a></p>
<p class="button_003"><a href="#" title="サイト概要">サイト概要</a></p>
<p class="button_003"><a href="#" title="利用規約">利用規約</a></p>
<p class="button_003"><a href="#" title="プライバシーポリシー">プライバシーポリシー</a></p>
<p class="button_003"><a href="#" title="サイトマップ">サイトマップ</a></p>
<p class="button_003"><a href="#" title="アクセス">アクセス</a></p>
<p class="button_003"><a href="#" title="お知らせ">お知らせ</a></p>
<p class="button_003"><a href="#" title="ご案内">ご案内</a></p>
<p class="button_003"><a href="#" title="ガイド">ガイド</a></p>
<p class="button_003"><a href="#" title="ナビゲーション">ナビゲーション</a></p>
<p class="button_003"><a href="#" title="メニュー">メニュー</a></p>
<p class="button_003"><a href="#" title="カテゴリ">カテゴリ</a></p>
<p class="button_003"><a href="#" title="コンテンツ">コンテンツ</a></p>
<p class="button_003"><a href="#" title="主要記事">主要記事</a></p>
<p class="button_003"><a href="#" title="次へ">次へ</a></p>
<p class="button_003"><a href="#" title="前へ">前へ</a></p>
<p class="button_003"><a href="#" title="商品ページ">商品ページ</a></p>
<p class="button_003"><a href="#" title="お申し込み">お申し込み</a></p>
<p class="button_003"><a href="#" title="ご注文">ご注文</a></p>
<p class="button_003"><a href="#" title="ご連絡">ご連絡</a></p>
<p class="button_003"><a href="#" title="会員登録">会員登録</a></p>
<p class="button_003"><a href="#" title="ログイン">ログイン</a></p>
<p class="button_003"><a href="#" title="会員ページ">会員ページ</a></p>
<p class="button_003"><a href="#" title="メールマガジン">メールマガジン</a></p>
<p class="button_003"><a href="#" title="無料レポート">無料レポート</a></p>
<p class="button_003"><a href="#" title="関連サイト">関連サイト</a></p>
<p class="button_003"><a href="#" title="リンクサイト">リンクサイト</a></p>
<p class="button_003"><a href="#" title="ポータルページ">ポータルページ</a></p>
<p class="button_003"><a href="#" title="オフィシャルページ">オフィシャルページ</a></p>
<p class="button_003"><a href="#" title="ポートフォリオページ">ポートフォリオページ</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_003 {font-size:24px; margin:20px 10px;}
.button_003 a {background:linear-gradient(to bottom, #333399,#ffffff); color:#ffffcc; padding:6px 20px; text-decoration:none; border-radius:24px;}
.button_003 a:hover {opacity:0.4; border-radius:24px;}
コメント