ボタンデザインで紹介したボタンリンクはリンク1つですが、複数のリンクの場合はこちらのデザインが好ましいと思います。
ここでは複数のリンクが密集した場合のデザインをご紹介します。いわゆる、リンクのグループ化と考えてください。
そういう意味ではページネーションもグループ化したリンクになりますね。
<ul class="btnlink_list">
<li><a href="URL">リンク文字</a></li>
<li><a href="URL">リンク文字</a></li>
<li><a href="URL">リンク文字</a></li>
<li><a href="URL">リンク文字</a></li>
<li><a href="URL">リンク文字</a></li>
</ul>
基本になるHTMLです。
必要に応じてclass="btn"は変更してご利用ください。
.btnlink_list,.btnlink_list *{
font-family:-apple-system-body,BlinkMacSystemFont,"Helvetica Neue","Hiragino Sans","Hiragino Kaku Gothic ProN","NotoSans Japanese","游ゴシックMedium","Yu Gothic Medium","メイリオ",meiryo,sans-serif;
word-break:normal !important;
word-wrap:break-word;
-webkit-text-size-adjust:100%;
margin:0;
padding:0;
outline:none;
list-style:none;
line-height:1.0;
box-sizing:border-box;
text-decoration:none;
}
スタイルしやすいようにリセットします。
それではデザインサンプルをご覧ください。
スマホサイトでよく見かけるリンクです。少し古いデザインかな?
.btnlink_list{
width:90%;
margin:12px auto;
border:1px solid #ccc;
border-radius:12px;
}
.btnlink_list a{
display:block;
padding:12px;
line-height:1.4;
border-bottom:1px solid #ddd;
position:relative;
}
.btnlink_list li:last-child a{
border-bottom:none;
}
.btnlink_list a:after{
display:block;
position:absolute;
top:50%;
right:16px;
width:7px;
height:7px;
margin-top:-4px;
border-top:solid 1px #7f7f7f;
border-right:solid 1px #7f7f7f;
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
content:"";
}
これもよく見かけるデザインですね。非常にわかりやすく、タップしやすいリンクボタンです。
.btnlink_list{
width:90%;
margin:12px auto;
}
.btnlink_list a{
display:block;
padding:12px;
line-height:1.4;
border-top:1px solid #555;
position:relative;
}
.btnlink_list li:last-child a{
border-bottom:1px solid #555;
}
.btnlink_list a:after{
display:block;
position:absolute;
top:50%;
right:16px;
width:7px;
height:7px;
margin-top:-4px;
border-top:solid 1px #7f7f7f;
border-right:solid 1px #7f7f7f;
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
content:"";
}
2カラムの下線リンクです。短いテキスト向けです。
.btnlink_list{
width:90%;
margin:12px auto;
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
overflow:auto;
}
.btnlink_list li{
width:50%;
display:inline-block;
float:left;
}
.btnlink_list a{
display:block;
padding:12px;
line-height:1.4;
border-bottom:1px solid #ddd;
text-align:center;
}
.btnlink_list li:last-child a{
border-bottom:none;
}
上のデザインに縦線を加えたデザインです。グリッド感がでます。
.btnlink_list{
width:90%;
margin:12px auto;
border-top:1px solid #ccc;
border-left:1px solid #ddd;
overflow:auto;
}
.btnlink_list li{
width:50%;
display:inline-block;
float:left;
}
.btnlink_list a{
display:block;
padding:12px;
line-height:1.4;
border-right:1px solid #ddd;
border-bottom:1px solid #ddd;
text-align:center;
}
ul要素に背景画像を装飾して、li要素に背景色を付け、透過させたゴストボタンのデザインです。
写真素材:GIRLY DROP
.btnlink_list{
width:90%;
margin:12px auto;
padding:20px;
background-image:url(../../img/exv/back01.jpg);
background-repeat:ro-epeat;
background-size:cover;
}
.btnlink_list li{
padding:10px 20px;
background-color:rgba(54,69,73,0.4);
}
.btnlink_list a{
display:block;
padding:12px;
line-height:1.4;
color:#fff;
font-weight:bold;
text-align:center;
border:2px solid #fff;
border-radius:6px;
}
.btnlink_list li:first-child{
padding-top:20px;
}
.btnlink_list li:last-child{
padding-bottom:20px;
}
上のデザインと同じように背景画像と背景色を透過したデザインで、横線のみにしました。
写真素材:GIRLY DROP
.btnlink_list{
width:90%;
margin:12px auto;
padding:20px;
background-image:url(../../img/exv/back02.jpg);
background-repeat:ro-epeat;
background-position:-160px 0;
background-size:cover;
}
.btnlink_list li{
background-color:rgba(255,255,255,0.4);
}
.btnlink_list a{
display:block;
margin:0 20px;
padding:20px 0;
line-height:1.4;
color:#fff;
font-weight:bold;
text-align:center;
border-bottom:2px solid #fff;
}
.btnlink_list li:first-child{
padding-top:20px;
}
.btnlink_list li:last-child{
padding-bottom:20px;
}
.btnlink_list li:first-child a{
border-top:2px solid #fff;
}
maronnieで作ったプロフホームページのようなデザインです。
.btnlink_list{
width:90%;
margin:12px auto;
}
.btnlink_list a{
display:block;
width:90%;
margin:12px auto;
height:50px;
line-height:50px;
color:#fff;
background-color:#fdbbb9;
border-radius:50px;
text-align:center;
box-shadow:0 1px 4px rgba(0,0,0,0.3);
}
CSSでナンバリングしたデザインです。番号が付くことで上から2番目のデザインとイメージが違います。
.btnlink_list{
width:90%;
margin:12px auto;
counter-reset:number 0;
}
.btnlink_list a{
display:block;
padding:12px;
line-height:1.4;
border-top:1px solid #ddd;
position:relative;
}
.btnlink_list li:last-child a{
border-bottom:1px solid #ddd;
}
.btnlink_list a:before{
display:inline-block;
counter-increment:number 1;
content:counter(number,decimal-leading-zero);
width:32px;
font-size:1.4em;
color:#71ace5;
}
.btnlink_list a:after{
display:block;
position:absolute;
top:50%;
right:16px;
width:7px;
height:7px;
margin-top:-4px;
border-top:solid 1px #7f7f7f;
border-right:solid 1px #7f7f7f;
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
content:"";
}
上のデザインと同じくナンバリングしたデザインです。番号を1桁にしたものです。
.btnlink_list{
width:90%;
margin:12px auto;
counter-reset:number 0;
}
.btnlink_list a{
display:block;
padding:12px;
line-height:1.4;
border-top:1px solid #ddd;
position:relative;
}
.btnlink_list li:last-child a{
border-bottom:1px solid #ddd;
}
.btnlink_list a:before{
display:inline-block;
counter-increment:number 1;
content:counter(number);
width:32px;
font-size:1.4em;
color:#71ace5;
}
.btnlink_list a:after{
display:block;
position:absolute;
top:50%;
right:16px;
width:7px;
height:7px;
margin-top:-4px;
border-top:solid 1px #7f7f7f;
border-right:solid 1px #7f7f7f;
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
content:"";
}
Font Awesomeを使用したリスト型リンクですが、このままではリンクと気づかないこともあるかもね。
.btnlink_list{
width:90%;
margin:12px auto;
counter-reset:number 0;
}
.btnlink_list a{
display:block;
padding:12px 12px 12px 62px;
line-height:1.4;
position:relative;
}
.btnlink_list a:before{
font-family:"Font Awesome 5 Free";
content:"\f058";
top:2px;
position:absolute;
left:12px;
color:#f783ac;
font-size:32px;
font-weight:bold;
display:inline-block;
width:32px;
}