Html Question posted in
Some basic documentation can be found here.

Html – How to expand a button using :hover in CSS?

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;
}`
Tags:

3

Answers


  1. 0 
          #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>
    Login or Signup to reply.
  2. 0

    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;
}
    Login or Signup to reply.
  3. 0

    Always remember one rule. Max-width and max-height will never work on pseudo-classes like hover active, so just use height and width for the :hover part.

     #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 {
            height: 200px; // not max-height
            width: 250px;  // not max-width
        }
     <button id="btn1"><a href="lisbon.html" target="_blank"><img src="" alt="">Lisbon</a></button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search