緑のボタンにカーソルを合わせたときに色が変わりません、hoverを使うのかと思ったのですが、解答はhoverを使っていません。

HTML
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8">
5  <title>Progate</title>
6  <link rel="stylesheet" href="stylesheet.css">
7  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
8</head>
9<body>
10  <!-- ここにコードを書いていきましょう -->
11  <header>
12    <div class="container">
13      <div class="header-left">
14        <img class="header-logo" src="https://prog-8.com/images/html/advanced/main_logo.png">
15      </div>
16        <div class="header-right">
17          <a href="#">ログイン</a>
18    </div>
19    </div>
20  </header>
21  <div class="wrapper-top">
22    <div class="container">
23      <h1>LEARN TO CODE.</h1>
24      <h1>LEARN TO BE CREATIVE.</h1>
25      <p>Progateはオンラインプログラミング学習サービスです。</p>
26      <p>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p>
27      <a href="#" class="btn signup">新規登録はこちら</a>
28      <p>or</p>
29      <a href="#" class="btn facebook">
30        <div class="fa fa-facebook">
31        Facebookで登録
32        </div>
33      </a>
34      <a href="#" class="btn twitter">
35        <div class="fa fa-twitter">
36        Twitterで登録
37        </div>  
38      </a>
39    </div>
40  </div>
41  <div class="wrapper-lesson">
42    <div class="container">
43      <h2>Learn Where to Get Started!</h2>
44      <div class="lessons">
45        <div class="card">
46          <div class="lesson-icon">
47            <img src="https://prog-8.com/images/html/advanced/html.png">
48            <p>HTML & CSS</p>
49          </div>
50             <p class="lesson-text">ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p>
51        </div>
52        <div class="card">
53          <div class="lesson-icon">
54            <img src="https://prog-8.com/images/html/advanced/jQuery.png">
55            <p>jQuery</p>
56          </div>
57            <p class="lesson-text">素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax（エイジャックス）を使って外部ファイルを読み込んだりと色々なことができます。</p>
58        </div>
59        <div class="card">
60          <div class="lesson-icon">
61            <img src="https://prog-8.com/images/html/advanced/ruby.png">
62            <p>Ruby</p>
63          </div>
64            <p class="lesson-text">オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p>
65        </div>
66        <div class="card">
67          <div class="lesson-icon">
68            <img src="https://prog-8.com/images/html/advanced/php.png">
69            <p>PHP</p>
70          </div>
71            <p class="lesson-text">HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p>
72        </div>
73      </div>
74    </div>
75  </div>
76  <div class="wrapper-message">
77    <div class="container">
78      <div class="message-text">
79        <h2>さあ、あなたもProgateでプログラミングを学んでみませんか？</h2>
80        <h3>Let's learn to code, learn to be creative!</h3>
81      </div>  
82      <a class="btn-message">さっそく開発する</a>
83    </div>
84  </div>
85  <footer>
86    
87  </footer>
88  
89</body>
90</html>

CSS
1html, body,
2ul, ol, li,
3h1, h2, h3, h4, h5, h6, p, div {
4  margin: 0;
5  padding: 0;
6}
7
8body {
9  font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif;
10}
11
12li {
13  list-style: none;
14}
15
16a {
17  text-decoration: none;
18}
19
20/* ここからCSSを書いていきましょう */
21header{
22  background-color:rgba(34,49,52,0.9);
23  height:65px;
24  width:100%;
25  position:fixed;
26  top:0;
27  z-index:10;
28}
29.header-logo{
30  width:124px;
31}
32.header-left{
33  float:left;
34  padding:20px 50px;
35}
36.header-right{
37  float:right;
38  background-color:rgba(255, 255, 255, 0.3);
39  margin-right:47px;
40}
41.header-right:hover{
42  background-color:rgba(255, 255, 255, 0.5);
43}
44.header-right a{
45    color:#fff;
46    display:block;
47    line-height:65px;
48    padding:0 25px;
49  }
50.wrapper-top{
51  background-image:url(https://prog-8.com/images/html/advanced/top.png);
52  background-size:cover;
53  color:#fff;
54  padding:180px 0  100px 0;
55  text-align:center;
56}
57.wrapper-top h1{
58  font-size:45px;
59  opacity:0.7;
60  letter-spacing:5px;
61}
62.wrapper-top p{
63  font-size:16px;
64  opacity:0.7;
65}
66.btn{
67  color:#fff;
68  display:inline-block;
69  opacity:0.8;
70  border-radius:4px;
71}
72.btn:hover{
73  opacity:1;
74}
75.signup{
76  background-color:#239b76;
77  padding:8px 23px;
78  margin-top:30px;
79  margin-bottom:15px;
80}
81.facebook{
82  background-color:#3b5998;
83  padding:10px 23px;
84  margin-top:15px;
85  margin-right:10px;
86}
87.twitter{
88  background-color:#55acee;
89  padding:10px 23px;
90}
91.wrapper-lesson{
92  text-align:center;
93  height:585px;
94  padding:0 53px;
95  background-color:#f7f7f7;
96}
97.wrapper-lesson h2{
98  color:#5f5d60;
99  font-weight:normal;
100  padding-top:82px;
101  padding-bottom:50px;
102}
103.card{
104 float:left;
105 width:25%;
106 position:relative;
107}
108.lesson-icon p{
109  position:absolute;
110  top:90px;
111  width:100%;
112  color:white;
113}
114.lesson-text{
115  color:#b3aeb5;
116  font-size:13px;
117  width:80%;
118  padding-top:15px;
119  display:inline-block;
120}
121.wrapper-message{
122  text-align:center;
123  padding:80px 0;
124  border-bottom:1px solid #eee;
125}
126.message-text{
127  padding-bottom:63px;
128}
129.message-text h2,h3{
130  font-weight:normal;
131  color:#5f5d60;
132}
133.btn-message{
134  color:white;
135  background-color:#5dca88;
136  padding:15px 40px;
137  border-radius:4px;
138  box-shadow:0 7px #1a7940;
139  cursor:pointer;
140}
141.btn-message:active{
142  box-shadow:none;
143  position:relative;
144  top:7px;
145}