CSSでマウスホバーすると沈むようなアニメーションのボタンにしたいのですが、どうもうまくいかないので、質問させていただきました。
手を加える前のボタンはこのサイトのタイトル下のものと同じです。
そしてそのHTMLとCSSのコードがこちらです。
HTML
1<!--SNSシェアボタン--> 2<div class="share-buttons"> 3<span style="font-size: 8px">シェアする</span> 4<div class="inner"> 5<!--はてなブックマーク--> 6<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button" target="_blank" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><i class="blogicon-bookmark lg"></i> <span class="hatena-bookmark-count share-text"><i class="fa fa-spinner fa-spin"></i></span><br> <span class="share-text">Bookmark!</span></a> 7<!--Facebook--> 8<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="facebook-button" onclick="window.open(this.href,'FaceBookWindow','width=650,height=450,menubar=no,toolbar=no,scrollbars=yes');return false;" title="Facebookでシェア"><i class="blogicon-facebook lg"></i> <span class="facebook-count share-text"><i class="fa fa-spinner fa-spin"></i></span><br><span class="share-text">Facebook</span></a> 9<!--Twitter--> 10<a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" class="twitter-button" onclick="window.open(this.href, 'TwitterWindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;"><i class="blogicon-twitter lg"></i><br><span class="share-text">Twitter</span></a> 11<!--Google+--> 12<a href="https://plus.google.com/share?url={URLEncodedPermalink}" onclick="window.open(this.href, 'GooglePlusWindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="googleplus-button"><i class="fa fa-google-plus"></i><br><span class="share-text">Google+</span></a> 13<!--Pocket--> 14<a href="http://getpocket.com/edit?url={URLEncodedPermalink}" class="pocket-button" target="_blank"><i class="fa fa-get-pocket"></i><br><span class="share-text">Pocket</span></a> 15</div> 16</div>
CSS
1/*share-botton*/ 2.share-buttons{ 3 margin-bottom: 10px; 4 text-align: center; 5} 6.share-buttons .inner a { 7 position: relative; 8 display: inline-block; 9 width: 15%; 10 height: 45px; 11 line-height: 25px; 12 font-size: 16px; 13 text-align: center; 14 color: #ffffff; 15 text-decoration: none; 16 padding:5px; 17} 18.share-buttons .inner .share-text{ 19 font-size: 15px; 20} 21.share-buttons .inner .hatena-bookmark-button{ 22 background: #008fde; 23 box-shadow: 0 3px #5478a5; 24} 25.share-buttons .inner .hatena-bookmark-button:hover{ 26 background: #1db4eb; 27} 28.share-buttons .inner .hatena-bookmark-button:active{ 29 background: #5478a5; 30} 31.share-buttons .inner .facebook-button{ 32 background: #305097; 33 box-shadow: 0 3px #213254; 34} 35.share-buttons .inner .facebook-button:hover{ 36 background: #4c70ba; 37} 38.share-buttons .inner .facebook-button:active{ 39 background: #213254; 40} 41.share-buttons .inner .twitter-button{ 42 background: #55acee; 43 box-shadow: 0 3px #0285b7; 44} 45.share-buttons .inner .twitter-button:hover{ 46 background: #83c3f3; 47} 48.share-buttons .inner .twitter-button:active{ 49 background: #0285b7; 50} 51.share-buttons .inner .googleplus-button{ 52 background: #db4a39; 53 box-shadow: 0 3px #a23629; 54} 55.share-buttons .inner .googleplus-button:hover{ 56 background: #e47365; 57} 58.share-buttons .inner .googleplus-button:active{ 59 background: #a23629; 60} 61.share-buttons .inner .pocket-button{ 62 background: #ee4256; 63 box-shadow: 0 3px 0 #b5392c; 64} 65.share-buttons .inner .pocket-button:hover{ 66 background: #f26f7f; 67} 68.share-buttons .inner .pocket-button:active{ 69 background: #b5392c; 70} 71.share-buttons .inner .share-buttons a:active{ 72 top: 3px; 73 box-shadow: none; 74}
沈むボタン、というのはこのサイトのコデペンで取り上げられているもののことです。
具体的に言いますと、例えば
.pocket-button:hoverのところで
margin-top:3px;
box-shadow:none;
を入れて、ホバーするとなぜか隣のボタンまで一緒に下に動いてしまいます。
もう意味がわからなくなってしまったので質問させていただきました。
駄文で申し訳ありません。
どうぞご教示お願い致します。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/03/25 14:01