How to expand a button using :hover in CSS?

Question

I am trying to make a button that will expand when you hover over it with the mouse. However, i cannot seem to get the button to change sizes.

I have tried to use animations but that also didn't work. i'm wondering if there is a problem with the code that will stop it from changing.

here is the code that wont work:

`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

In your code, you missed the closing of the button style by "}". place is before the #btn1:hover line. And further improvement you can set transition to smooth change show. The correction code is.

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