HTML,CSS,PHP,ワードプレスカスタマイズ 技術情報資料

NEXTPAGE

案外地味な NEXTPAGE。

&nbsp

わかりやすさでいうとどうかな?って気もするけれど、結構素敵なのでやってみた。

 

 

 

 

<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>

スポンサーリンク

スポンサーリンク

カテゴリー