【CSS】ボタンを凹ます動きをつけたいのに、:activeが効かないのですが…

Question

前提・実現したいこと

初歩的な質問で申し訳ありません。
現在、Rails6にてチュートリアル的にTODOアプリケーションを作成しております。

HTML/CSSのコーディング中にちょっと詰まってしまいました。
ボタン（aタグ）にカーソルが当たると要素の色味が変わり、クリックするとボタンが押し込まれる動きをつけたいと思っています。

:hoverは適用されるのですが、:activeが効きません。

ググってみても、ピンポイントなものがなかったので質問させていただきました。

よろしくお願い致します。

実装したコード

<!-- top.html.erb -->

<div class="btn-wrapper">
  <%= link_to("CREATE NEW TASK", "#", {method: "post", class: "create-btn" }) %>
</div>

/* static_pages.scss */

.btn-wrapper {
    width: 230px;
    height: 65px;
    border-radius: 3px;
    margin: 0 auto;
    box-shadow: 0 3px;
    background-color: #15A791;
    .create-btn {
      display: block;
      line-height: 65px;
      text-align: center;
      color: white;
      font-size: 19px;
    }
    .create-btn:hover {
      background-color: #00C9AB;
      border-radius: 3px;
    }
    .create-btn:active {
      top: 3px;
      box-shadow: none;
    }

Answer 1

:activeも効きましたよ。
変化が少ないのでちょっとわかりにくかったですけど。
確認のためbackground-color: red;を追加してみたらはっきり効いているのがわかりました。

ところで提示されているCSSコードは最後の}が足りないようですけど、それは大丈夫ですか？

私はRailsは使っていないのでHTMLは下記コードで試しました。

<button type="button" class="create-btn">button</button>

---

追記

目指している見栄えはわかりませんが、.create-btn には width: 100%;を指定しないとボタンの幅がおかしいかなと思いました。

Comments

[Hamadust]

ご回答ありがとうございます。
:active、しっかり効いていました。
提示しましたCSSコードの最後の　}　はコピペミスでした。

ご回答がヒントとなり、期待する動作を実現することができました。