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

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

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

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

CSS

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

Q&A

解決済

2回答

390閲覧

CSSで、hover時にボタンの背景をスライド式に変えたい

Okt

総合スコア21

HTML

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

CSS

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

0グッド

0クリップ

投稿2023/05/23 12:44

編集2023/05/23 12:46

実現したいこと

白いボタンにhoverすると、黒い背景が左側から差し込まれる形で現れ、hoverを外すと黒い背景が右側へと消えていってデフォルトのボタンの見た目に戻る。

前提

cssのアニメーションを使って、白いボタンにhoverすると、黒い背景が左側から差し込まれる形で現れ、hoverを外すと黒い背景が右側へと消えていってデフォルトのボタンの見た目に戻る、というのを実現したいと思っています。

発生している問題・エラーメッセージ

書いたコードだと、hoverを外した瞬間に黒い背景(疑似要素)が、もともと居た左の方へ戻ってしまします。ここを、右に移動して切れていってほしいと思うのですが、方法が思いつきません。

該当のソースコード

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <button class="btn">ボタン</button> </body> </html>

CSS
.btn {
width: 200px;
height: 100px;
border: 1px solid #000;
background-color: white;
color: #000;
font-size: 2rem;
cursor: pointer;
position: relative;
overflow: hidden;
z-index: 1;
transition: color 0.3s ease;
}
.btn::before {
content: "";
display: inline-block;
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background-color: black;
transition: all 0.3s ease;
z-index: -1;
}
.btn:hover {
color: white;
}
.btn:hover::before {
transform: translateX(100%);

試したこと

補足情報(FW/ツールのバージョンなど)

すみません、HTMLのコードがなぜか改行されないです。見づらくて申し訳ありません。

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

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

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

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

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

int32_t

2023/05/23 23:03

> HTMLのコードがなぜか改行されないです。 HTMLソースの前に「```html」後に「```」の行を入れてください。CSSも前に「```css」後に「```」です。 https://teratail.com/help#about-markdown の「コードを入力」
guest

回答2

0

ベストアンサー

:hover がないときと、あるときで transition対象のプロパティを変更すれば非対称の動きにできます。
今回の要件ならば、
scaleXで幅を変更するアニメーションにして、
transform-origin を:hoverの有無で切り替えれば、ご希望の動きになるでしょう。

css

1.btn { 2 width: 200px; 3 height: 100px; 4 border: 1px solid #000; 5 background-color: white; 6 color: #000; 7 font-size: 2rem; 8 cursor: pointer; 9 position: relative; 10 overflow: hidden; 11 z-index: 1; 12 transition: color 0.3s ease; 13} 14.btn::before { 15 content: ""; 16 display: block; 17 position: absolute; 18 left: 0; /* 修正 */ 19 top: 0; 20 width: 100%; 21 height: 100%; 22 background-color: black; 23 transition: transform 0.3s ease; 24 z-index: -1; 25 transform: scaleX(0); /* 追加 */ 26 transform-origin: right top; /* 追加 */ 27} 28.btn:hover { 29 color: white; 30} 31.btn:hover::before { 32 transform: scaleX(1); /* 修正 */ 33 transform-origin: left top; /* 追加 */ 34}

参考リンク
CSS transitionを往復で非対称にかける場合の注意点 - Qiita

投稿2023/05/24 01:55

hatena19

総合スコア33856

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

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

int32_t

2023/05/24 02:15

おお、できるんですね。素晴らしい。
Okt

2023/05/24 16:33

軸を変えるという発想、ありがとうございます。 「.btn::before」の中の「transition: transform 0.3s ease;」の第1引数を「all」にしていて、その間違いに気付いて修正したところ、まさに実現したかった動きが完成しました。本当にありがとうございました!
guest

0

追記:
hatena19さんの回答を参照してください。この回答はベストではありません。


hover前の状態とhover後の状態を区別しなければなりませんが、CSSだけでそれをするのは無理だと思います。

  • mouseleave イベントで「hover後」を表現するクラスを足す
  • hover後アニメーションが終わったタイミングで上記のクラスをこっそり削除する

ということをJavaScriptでやる必要がありそうです。

投稿2023/05/23 13:47

編集2023/05/24 02:18
int32_t

総合スコア21190

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

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

Okt

2023/05/24 16:31

ありがとうございます。JavaScriptはかなりの初心者なので、JavaScriptの方でもできるよう頑張ります。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.44%

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

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

質問する

関連した質問