コニファ・ロゴ

csstest:[CSS] hoverでテキストの背景にグラデーション効果

テキストhover時に、その背景をグラデーションで塗りつぶす効果です。次のサンプルのテキストにhoverすると、上から順に下へ向かって背景をグラデーションで塗りつぶします。

サンプル

htmlソース

<div id="test">
	<a href="#">ダミーテキスト  親譲りの無鉄砲で小供の時から損ばかりしている。小学校に…
	--中略--
	…奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。(青空文庫より)</a>
</div>

CSSソース

#test a {
    background-size: 0% 25px;
    background-repeat: no-repeat;
    background-position: 0% 50%;
    transition: all 0.9s ease-in-out;
    background-image: linear-gradient(to right, #ff7 0%, tomato 100%);
    color: #222;
    text-decoration: none;
    font-size: 20px;
    }
#test a:hover {
    background-position: 0% 50%;
    background-size: 100% 25px;
    -webkit-background-size: 100% 25px;
    }

 

 

 

戻るボタン