テキストがだんだんとフェードアウトしていくような感じのデザイン。

http://css-tricks.com/text-fade-read-more/

これを参考に自分は白フェードアウトで実装してみた。

<div class="sidebar-box">
	<p>長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文</p>
	<p class="read-more"><a href="#" class="button">もっと読む</a></p>
</div>

.sidebar-box {
    height: 120px;
    position: relative;
    overflow: hidden;
    transition: height 0.8s ease;
    -o-transition: height 0.8s ease; 
    -moz-transition: height 0.8s ease;
    -webkit-transition: height 0.8s ease;
}
.sidebar-box .read-more { 
    position: absolute; 
    bottom: 0;
    left: 0;
    width: 100%; 
    text-align: center; 
    margin: 0;
    padding: 30px 0;
    background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    background-image: -moz-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    background-image: -ms-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    background-image: -o-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
}