下記のサイトを参考に、
ボタンのアニメーションをつけましたが、
右の背景でつけた、矢印画像が、ホバー時に上手く、表示されません。
aタグの中にspanタグをつけ。それに矢印画像を付けるとホバーすると表示されるようになるのですが、
spanタグの場合、ホバーできる領域が狭いのが問題となります。
アニメーションを入れた状態で、矢印画像もホバー時にも表示させたいです。
https://www.nxworld.net/tips/10-css-hover-fill-animation.html
html5
1<p><a class="button" href="#"><span>Button</span></a></p>
css3
1.button::before { 2 position: absolute; 3 top: 0; 4 right: 0; 5 bottom: 0; 6 left: 0; 7 z-index: -1; 8 content: ''; 9 background: #fff; 10 transform-origin: right top; 11 transform: scale(0, 1); 12 transition: transform .3s; 13} 14.button:hover::before { 15 transform-origin: left top; 16 transform: scale(1, 1); 17} 18.button { 19 position: relative; 20 display: inline-block; 21 border: 1px solid #000; 22 padding: 15px 60px 15px 30px; 23 background: #000; 24 background-position-x: right; 25 background-position: 90% 50%; 26 color: #fff; 27} 28.button:hover { 29 color: #082242; 30} 31.button span{ 32 background: url(../img/btn_icon.png) right no-repeat #082242; 33} 34.button span:hover { 35 z-index: 5; 36 color: #000; 37 background: url(../img/02.png) right no-repeat;padding: 0 10px 0 20px; 38} 39
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/10/22 12:39