効果のあるホバーのテキストの変更

Question

ホバー上のボタンでデフルトのコンテンツを自分のカスタムコンテンツに置き換えたい

私はここで良い例が見つかりました：

<iframe height='268' scrolling='no' src='//codepen.io/Jintos/embed/rolim/?height=268&theme-id=0&default-tab=result' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='http://codepen.io/Jintos/pen/rolim/'>Change text on :hover and :active </a> by Jintos (<a href='http://codepen.io/Jintos'>@Jintos</a>) on <a href='http://codepen.io'>CodePen</a>. 

を、それが動作し、新しいテキストを左から右に来て（影響を）

がトップでそれをカスタマイズした方法を教えてくださいすることができます。 （右から左への代わりに）

Answer 1

ペンの完全なコードを確認してください。

.button:before { 
    content: attr(data-hover); 
    -webkit-transform: translate(0,-150%); 
    -moz-transform: translate(0,-150%); 
    -ms-transform: translate(0,-150%); 
    -o-transform: translate(0,-150%); 
    transform: translate(0,-150%); 
} 

Answer 2

このうち私は、これはあなたを助けると信じて...

<button class="button" type="button" data-hover="CLICK ME" data-active="I'M ACTIVE"><span>HOVER EFFECT</span></button> 

カスタムハンドラチェックがために書かれている：あなたは隠されたテキストの初期位置を変更する必要があります下効果にトップため ボタンをデータホバーとして使用し、簡単にテストを変更することができます。