Hover effect not changing color-CodePudding

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;
}

CodePudding user response：

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.

CodePudding user response：

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>