はてなブログの続きを読むをカスタマイズ

続きを読むがあまり目立たないので、カスタマイズしました

やりたかったことは

枠で囲む
文字と枠の色を変える
マウスを乗せたらなんか動く（適当ｗ）

サンプルコード

entry-see-more というクラスに色々と設定をします

今回は上から降ってくるようなモーションを入れてます

transition: 0.4s;

ここでモーションの速さを調整します

.entry-see-more {
display: block;
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
text-decoration: none;
font-weight:bold;
position: relative;
color: #ff99cc;
background:#FFF;
border: 1px solid #ff99cc;
z-index:2;
overflow: hidden;
transition: 0.4s;
}
.entry-see-more:hover {
color:#FFF;
}
.entry-see-more:after {
position:absolute;
content:'';
width:100%;
height:100%;
top:-100%;
left:0;
z-index:-1;
transition: 0.4s;
}
.entry-see-more:hover:after {
top:0;
background:#ff99cc;
}