:activeが機能しない問題を解決したい。

btn:activeを機能させたい。

クリックした時にtransformを効かせたい。

btn:activeが動作しない。

css
1.btn:active {
2  transform: translateY(-1px);
3  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
4}

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="en">
3    <head>
4        <meta charset="UTF-8">
5        <meta name="viewport" content="width=device-width, initial-scale=1.0">
6        
7        <link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet">
8
9        <link rel="stylesheet" href="css/icon-font.css">
10        <link rel="stylesheet" href="css/style.css">
11        <link rel="shortcut icon" type="image/png" href="img/favicon.png">
12        
13        <title>Natours | Exciting tours for adventurous people</title>
14    </head>
15    <body>
16        <header class="header">
17            <div class="logo-box">
18                <img src="img/logo-white.png" alt="Logo" class="logo">
19            </div>
20
21            <div class="text-box">
22                <h1 class="heading-primary">
23                    <span class="heading-primary-main">Outdoors</span>
24                    <span class="heading-primary-sub">is where life happens</span>
25                </h1>
26
27                <a href="#" class="btn btn-white">Discover our tours</a>
28            </div>
29        </header>
30        
31    </body>
32</html>
33

css
1/*
2COLORS:
3
4Light green: #7ed56f
5Medium green: #55c57a
6Dark green: #28b485
7
8*/
9
10* {
11  margin: 0;
12  padding: 0;
13  box-sizing: border-box;
14}
15
16body {
17  font-family: "Lato," sans-serif;
18  font-weight: 400;
19  font-size: 16px;
20  line-height: 1.7;
21  color: #777;
22  padding: 30px;
23}
24
25.header {
26  height: 95vh;
27  background-image: linear-gradient(
28      to right bottom,
29      rgba(126, 213, 111, 0.8),
30      rgba(40, 180, 131, 0.8)
31    ),
32    url(../img/hero.jpg);
33  background-size: cover;
34  background-position: top;
35  position: relative;
36
37  clip-path: polygon(0 0, 100% 0, 100% 200px, 0 100%);
38}
39
40.logo-box {
41  position: absolute;
42  top: 40px;
43  left: 40px;
44}
45
46.logo {
47  height: 35px;
48}
49
50.text-box {
51  position: absolute;
52  top: 40%;
53  left: 50%;
54  transform: translate(-50%, -50%);
55  text-align: center;
56}
57
58.heading-primary {
59  color: #ffffff;
60  text-transform: uppercase;
61
62  backface-visibility: hidden;
63  margin-bottom: 60px;
64}
65
66.heading-primary-main {
67  display: block;
68  font-size: 60px;
69  font-weight: 400;
70  letter-spacing: 35px;
71
72  animation-name: moveInLeft;
73  animation-duration: 1s;
74  animation-timing-function: ease-out;
75
76  /*
77  animation-delay: 3s;
78  animation-iteration-count: 3;
79  */
80}
81
82.heading-primary-sub {
83  display: block;
84  font-size: 20px;
85  font-weight: 700;
86  letter-spacing: 17.4px;
87  animation: moveInRight 1s ease-out;
88}
89
90@keyframes moveInLeft {
91  0% {
92    opacity: 0;
93    transform: translateX(-100px);
94  }
95
96  80% {
97    transform: translateX(10px);
98  }
99
100  100% {
101    opacity: 1;
102    transform: translate(0);
103  }
104}
105
106@keyframes moveInRight {
107  0% {
108    opacity: 0;
109    transform: translateX(100px);
110  }
111
112  80% {
113    transform: translateX(-10px);
114  }
115
116  100% {
117    opacity: 1;
118    transform: translate(0);
119  }
120}
121
122.btn:link,
123.btn:visited {
124  text-transform: uppercase;
125  text-decoration: none;
126  padding: 15px 40px;
127  display: inline-block;
128  border-radius: 100px;
129  transition: all 0.2s;
130}
131
132.btn:active {
133  transform: translateY(-1px);
134  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
135}
136
137.btn:hover {
138  transform: translateY(-3px);
139  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
140}
141
142.btn-white {
143  background-color: #fff;
144  color: #777;
145}
146

試したこと

css
1btn:active と btn:hoverを並び替えてみた。

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

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答1件

ベストアンサー

btn:active と btn:hoverを並び替えてみた。

そうすれば適用されます（jsFiddle）。ただし、状態が:hoverから:activeに移行する形となります（同じtransformプロパティを操作する以上、上書きされての適用となります）。

投稿2021/05/24 00:46

maisumakun

総合スコア145925

You

2021/05/24 00:49

回答ありがとうございます。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.37%

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

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

質問する

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

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

:activeが機能しない問題を解決したい。

btn:activeを機能させたい。

btn:activeが動作しない。

該当のソースコード

試したこと

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

関連した質問