NEXTPAGE
 
わかりやすさでいうとどうかな?って気もするけれど、結構素敵なのでやってみた。
<div class="nextpage"> <a href="#"> <span class="label">【次ページ】</span><span class="linktext">【写真】「りんく」</span> </a> </div> <style> .label{ width:68px; background:url(http://tecinfo.yuzumaru.co.jp/wp-content/uploads/2017/09/icon_nextpage.png) no-repeat 5px center; text-indent:-9999px } label{display:block} .linktext{ padding:10px 13px; background:#fff;border-radius:2px } .nextpage a{ display:table; width:480px; min-height:45px; margin:1em auto; border:4px solid #D6002B; border-radius:6px; color:#D6002B; font-weight:bold;background:#D6002B} .nextpage span{ display:table-cell; vertical-align:middle; line-height:1.2 } .nextpage .label{ width:68px;background:url(http://tecinfo.yuzumaru.co.jp/wp-content/uploads/2017/09/icon_nextpage.png) no-repeat 5px center; text-indent:-9999px } .nextpage .linktext{ padding:10px 13px; background:#fff;border-radius:2px } .nextpage a:hover{ border:4px solid #000; background:#000; color:#000 } </style>
スポンサーリンク