ボタンクリック時のデザイン

ボタンのクリック時デザイン

ボタンをクリックすると影がなくなるようにしたいのですが、できません

自分でやったこと

全角スペースの確認
クラス名の確認
プロゲートの見本ではspanが使われていますがaタグで実装したいと思っています
aタグの場合はactiveを使ってはいけないのでしょうか？

html, body,
ul, ol, li,
h1, h2, h3, h4, h5, h6, p, div {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif;
}

li {
  list-style: none;
}

body {
  margin: 0;
  font-family:"Hiragino Kaku Gothic ProN ";
}

a {
  text-decoration: none;
}

.top-wrapper {
    background-image: url("https://prog-8.com/images/html/advanced/top.png");
    padding:180px 0px 100px 0px;
    color:white;
    text-align: center;
    background-size:cover;
}

.top-wrapper h1 {
  opacity:0.7;
  font-size:45px;
  letter-spacing: 5px;
}

.top-wrapper p {
  opacity: 0.7;
}

.container{
 width:1170px;
 margin:auto;
 padding:0 15px;
 letter-spacing:5px;

}

.btn-wrapper {
  margin:20px 0px;
}

.btn {
    display:inline-block;
    color:white;
    border-radius:4px;
    padding:8px 24px;
    
}

.twitter {
    background-color:#55acee;
    margin-left:10px;
}

.facebook{
    background-color:#3b5998;
}

.sign-up{
    background-color: #239b76;
}

.lesson-wrapper {
  height: 500px;
  padding-bottom: 80px;
  background-color: #f7f7f7;
  text-align: center;
}

.lesson {
  float:left;
  width:25%;
}

.lesson-icon {
  position: relative;
}

.lesson-icon p {
  position: absolute;
  top: 90px;
  width: 100%;
  color: white;
}

.heading {
  padding-top: 60px;
  padding-bottom: 30px;
  color: #5f5d60;
}

.txt-contents {
  width: 80%;
  display: inline-block;
  margin-top: 20px;
  font-size: 12px;
  color: #b3aeb5;
}



.message-wrapper {
  border-bottom: 1px solid #eee;
  padding-bottom: 80px;
  text-align: center;
}

.message {
  padding: 15px 40px;
  background-color: #5dca88;
  /* box-shadowをつけてください */
  box-shadow: 0 7px #1a7940;
  cursor: pointer;

}

.message :active {
  box-shadow: none;
  position: relative;
  top:7px;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>progate</title>
    <link rel="stylesheet" href="progate-css.css">
  </head>
    <body>

        <div class="top-wrapper">
         <div class="container">
               <h1>LEARN TO CODE</h1>
               <h1>LEARN TO BE CREATIVE</h1>
               <p>Progateはオンラインプログラミング学習サービスです。</p>
               <p>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p> 
            <div class="btn-wrapper">
             <a  href="#" class="btn sign-up">新規登録はこちら</a>
             <p>or</p>
             <a href="#" class="btn twitter">twitterでログイン</a>
             <a href="#" class="btn facebook">facebookでログイン</a>
            </div>
          </div>
        </div>

        <div class="lesson-wrapper">
            <div class="container">
             <div class="heading">
                 <h2>Learn Where to Get Started!</h2>
             </div>
             
             <div class="lessons">
                 <div class="lesson">
                     <div class="lesson-icon">
                         <img src="https://prog-8.com/images/html/advanced/html.png">
                         <p>HTML & CSS</p>
                     </div>
                     <p class="txt-contents">Webページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p>
                 </div>

                  <div class="lesson">
                     <div class="lesson-icon">
                        <img src="https://prog-8.com/images/html/advanced/jQuery.png">
                        <p>jQuery</p>
                     </div>
                     <p class="txt-contents">素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax（エイジャックス）を使って外部ファイルを読み込んだりと色々なことができます。</p>
                 </div>

                 <div class="lesson">
                     <div class="lesson-icon">
                        <img src="https://prog-8.com/images/html/advanced/ruby.png">
                        <p>Ruby</p>
                     </div>
                     <p class="txt-contents">HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p>
                 </div>

                 <div class="lesson">  
                     <div class="lesson-icon">
                        <img src="https://prog-8.com/images/html/advanced/php.png">
                        <p>PHP</p>
                   </div>
                     <p class="txt-contents">オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p>
              </div>
                
             
            </div>
            </div>
        </div>

        <div class="message-wrapper">
            <div class="container">
               <div class="heading">
                   <h2>さぁ、あなたもProgateでプログラミングを学んでみませんか?</h2>
                   <h3>Let's learn to code, learn to be creative</h3>
               </div> 
               <a class="btn message" href="#">さっそく開発する</a>
            </div>
        </div>
        

        
    </body>
</html>