如何在 CSS 中使用 :hover 展开按钮？

Question

我正在尝试制作一个按钮，当您将鼠标悬停在其上时，该按钮会展开。但是，我似乎无法获得更改尺寸的按钮。

我尝试过使用动画，但这也不起作用。我想知道代码是否存在阻止其更改的问题。

这是不起作用的代码：

`HTML:
<button id="btn1"><a href="lisbon.html"><img src="" target="_blank" alt="">Lisbon</a></button>

CSS:
#btn1 {
    height: 150px;
    width: 220px;
    position: absolute;
    left: 550px;
    top: 400px;
    background-image: url(Images/portugal-flag.jpg);
    background-size: cover;
    cursor: pointer;

#btn1:hover {
    max-height: 200px;
    max-width: 250px;
}`

Answer 1

      #btn1 {
        height: 150px;
        width: 220px;
        position: absolute;
        left: 550px;
        top: 400px;
        background-image: url(Images/portugal-flag.jpg);
        background-size: cover;
        cursor: pointer;
        transition: all 1s;
      }

      #btn1:hover {
        height: 200px;
        width: 250px;
      }
      
      
      --or--
      
            #btn1 {
        height: 150px;
        width: 220px;
        position: absolute;
        left: 550px;
        top: 400px;
        background-image: url(Images/portugal-flag.jpg);
        background-size: cover;
        cursor: pointer;
        transition: transform 1s;
      }

      #btn1:hover {
        transform: scale(1.2);
      }

    <button id="btn1">
      <a href="lisbon.html"><img src="" target="_blank" alt="" />Lisbon</a>
    </button>