はてなブログの続きを読むをカスタマイズ - ネコグラマの日常と家計簿

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

やりたかったことは

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

サンプルコード

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