質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

4347閲覧

CSSでホバーすると沈むボタンがうまく作れない

Jin114514

総合スコア11

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/03/24 18:31

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;
を入れて、ホバーするとなぜか隣のボタンまで一緒に下に動いてしまいます。

もう意味がわからなくなってしまったので質問させていただきました。
駄文で申し訳ありません。
どうぞご教示お願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

.share-buttons .inner a が inline-block つまり、1行の扱いだから、margin-topで押し上げると行の高さだけが広がることになり、全体が動くという感じです。

CSS

1.share-buttons .inner a { 2 display: block; 3 float: left; 4} 5```**動くサンプル:**[https://jsfiddle.net/odf09h2k/](https://jsfiddle.net/odf09h2k/) 6 7--- 8 9か、transformを使うとか。 10```CSS 11.share-buttons .inner .pocket-button:hover{ 12 transform: translate(0px, 5px); 13} 14```**動くサンプル:**[https://jsfiddle.net/odf09h2k/1/](https://jsfiddle.net/odf09h2k/1/)

投稿2017/03/24 18:47

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Jin114514

2017/03/25 14:01

なるほど... 簡潔で解りやすい解説、ありがとうございます。
guest

0

ベストアンサー

ここで .inner の後に .share-buttons があるのが間違っています。

.share-buttons .inner .share-buttons a:active{
top: 3px;
box-shadow: none;
}

border の透過色と opacity を使い、ボタンごとに box-shadow,:hover,:activeの 色を指定しなくて良いようにしてみました。スッキリすると思います。

CSS

1/*share-botton*/ 2 3.share-buttons { 4 margin-bottom: 10px; 5 text-align: center; 6} 7 8.share-buttons .inner a { 9 position: relative; 10 display: inline-block; 11 width: 100px; 12 height: 45px; 13 font-size: 15px; 14 text-align: center; 15 color: #ffffff; 16 text-decoration: none; 17 border-bottom: 3px solid rgba(0,0,0,0.3); 18 padding: 5px; 19} 20 21.share-buttons .inner a:hover { 22 opacity: 0.7; 23 top: 3px; 24 border-bottom: 0; 25} 26 27.share-buttons .inner a:active { 28 opacity: 0.9; 29} 30 31.share-buttons .inner .hatena-bookmark-button { 32 background: #008fde; 33} 34 35.share-buttons .inner .facebook-button { 36 background: #305097; 37} 38 39.share-buttons .inner .twitter-button { 40 background: #55acee; 41} 42 43.share-buttons .inner .googleplus-button { 44 background: #db4a39; 45} 46 47.share-buttons .inner .pocket-button { 48 background: #ee4256; 49}

投稿2017/03/25 06:10

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Jin114514

2017/03/25 14:04

わざわざ書き直してくださるとは...!! お二方ともお答えいただきありがとうございました! 書き直してくださったので、ベストアンサーにさせていただきます。 kei344さんもありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問