Hover 效果不变色

Question

I have 2 card in my design. They both have gradient colors assigned to each of them. I have tried different ways to add a hover effect but for some reason it does not apply. I am not sure what I am missing.

html

<a href="#" class="btn sky">
                <img src="/images/money.png" class="wallet-option-icon" alt="Wallet Icon">
                <span class="wallet-option-text">Wallets</span>
                You can start to use your wallet
            </a>
            <a href="#" class="btn orange">
                <img src="/images/exchange.png" class="wallet-option-icon" alt="Exchange Icon">
                <span class="wallet-option-text">Exchange</span>
                You can start to use our Exchange
            </a>

CSS Code

.btn {
  display: inline-block;
  padding: 10px;
  text-decoration: none;
  font-size: 10px;
  color: azure;
  width: 150px;
  height: 189px;
  border-radius: 10%;
  box-shadow: 11px 10px 21px -1px rgba(41, 40, 40, 0.65);
  -webkit-box-shadow: 11px 10px 21px -1px rgba(41, 40, 40, 0.65);
  -moz-box-shadow: 11px 10px 21px -1px rgba(41, 40, 40, 0.65);
}

.sky {
  
  background-image: linear-gradient(
    160deg,
    #4bd2ee 0%,
    #368df6 50%,
    #2a71fb 100%
  );
  margin: 0 12px 0 0;
}


.orange {
  
  background-image: linear-gradient(
    160deg,
    #f87f00 0%,
    #f98800 50%,
    #faa233 100%
  );
}

.btn:hover {
  background-image: black;
}

Answer 1

black is not a valid value for background-image . You could set it to none and set the background-color to black, or do a solid black linear-gradient, or just set background: black .

Answer 2

Change

.btn:hover {
  background: black;
}

 .btn { display: inline-block; padding: 10px; text-decoration: none; font-size: 10px; color: azure; width: 150px; height: 189px; border-radius: 10%; box-shadow: 11px 10px 21px -1px rgba(41, 40, 40, 0.65); -webkit-box-shadow: 11px 10px 21px -1px rgba(41, 40, 40, 0.65); -moz-box-shadow: 11px 10px 21px -1px rgba(41, 40, 40, 0.65); }.sky { background-image: linear-gradient( 160deg, #4bd2ee 0%, #368df6 50%, #2a71fb 100% ); margin: 0 12px 0 0; }.orange { background-image: linear-gradient( 160deg, #f87f00 0%, #f98800 50%, #faa233 100% ); }.btn:hover { background: black; }

 <a href="#" class="btn sky"> <img src="/images/money.png" class="wallet-option-icon" alt="Wallet Icon"> <span class="wallet-option-text">Wallets</span> You can start to use your wallet </a> <a href="#" class="btn orange"> <img src="/images/exchange.png" class="wallet-option-icon" alt="Exchange Icon"> <span class="wallet-option-text">Exchange</span> You can start to use our Exchange </a>